2D and 3D Transformations

The transform property allows you to rotate, scale, skew, or translate an element.

Transforms can be combined and used with transitions/animations for dynamic effects.

/* 2D Transforms */
.translate { transform: translate(50px, 100px); }
.rotate { transform: rotate(45deg); }
.scale { transform: scale(1.5); }
.skew { transform: skew(20deg, 10deg); }

/* Combined */
.combined {
  transform: translate(50px, 0) rotate(45deg) scale(1.2);
}

/* 3D Transforms */
.rotateX { transform: rotateX(45deg); }
.rotateY { transform: rotateY(45deg); }
.perspective {
  perspective: 1000px;
}

translate(x, y) - Move element
rotate(angle) - Rotate element
scale(x, y) - Resize element
skew(x, y) - Skew element
rotateX/Y/Z - 3D rotations
transform-origin - Set rotation point

Try Transforms

<div class="transform-demo">
  <div class="box t1">Translate</div>
  <div class="box t2">Rotate</div>
  <div class="box t3">Scale</div>
  <div class="box t4">Combined</div>
</div>

Note: Transforms don't affect document flow. Use transform instead of position for better performance.

CSS Transform

2D and 3D Transformations

Try Transforms