Transform
5 min read
transform moves, scales, rotates, and skews elements without affecting layout. translate(x, y) moves, scale(1.2) enlarges, rotate(45deg) rotates. Transforms are GPU-accelerated for smooth performance.
CSS Transforms
/* 2D */
transform: translateX(50px);
transform: translateY(-20px);
transform: translate(50px, -20px);
transform: scale(1.5);
transform: rotate(45deg);
transform: skew(10deg, 5deg);
/* Chain transforms */
transform: translate(-50%, -50%) rotate(45deg) scale(0.8);
/* 3D */
transform: rotateX(30deg);
transform: perspective(400px) rotateY(30deg);