0Pricing
CSS Academy · Lesson

Skew and Matrix Transforms

Create diagonal distortions with skew() and apply full transform matrices with matrix().

skew() Transform

skew() tilts an element along one or both axes, creating a slanted or italic-like distortion on block elements.

.diagonal-section {
  transform: skewY(-3deg);
}

.italic-badge {
  transform: skewX(-10deg);
}

skewX() and skewY()

Apply skew independently to each axis:

/* Slant a decorative background */
.banner::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: skewY(-4deg);
  background: royalblue;
  z-index: -1;
}

All lessons in this course

  1. Translate Rotate and Scale
  2. Skew and Matrix Transforms
  3. Transform Origin and Perspective
  4. 3D Transforms: rotateX rotateY translateZ
← Back to CSS Academy