Transform Functions
| Function | Example | Description |
|---|---|---|
| translate(x, y) | translate(20px, -10px) | Move element. translateX() / translateY() for one axis |
| scale(x, y) | scale(1.1) / scale(1.5, 0.8) | Resize. scaleX() / scaleY() for one axis |
| rotate(angle) | rotate(45deg) / rotate(-90deg) | Rotate clockwise (positive) or counter-clockwise |
| skew(x, y) | skew(10deg, 5deg) | Tilt along axes. skewX() / skewY() |
| matrix(a,b,c,d,e,f) | Complex | Combined 2D transform matrix |
transform: translate(20px, -10px);
transform: scale(1.05);
transform: rotate(45deg);
transform: translateX(-50%) translateY(-50%); /* center trick */Combining Transforms
/* Order matters — transforms are applied right to left */
transform: translateY(-4px) scale(1.02);
/* First scales, then translates */
/* Card hover effect */
.card { transition: transform 0.2s ease; }
.card:hover { transform: translateY(-4px) scale(1.01); }
/* Spin and grow */
.btn:hover { transform: rotate(5deg) scale(1.1); }💡 Order matters:
rotate(45deg) translate(100px) is different from translate(100px) rotate(45deg). The first rotates the coordinate system, then translates along the rotated axis.3D Transforms
/* Require perspective on parent or element */
.parent { perspective: 1000px; }
.card { transform: rotateY(10deg); }
.card:hover { transform: rotateY(0deg); }
/* Flip card */
.card-front { transform: rotateY(0deg); }
.card-back { transform: rotateY(180deg); }
.card.flipped .card-front { transform: rotateY(-180deg); }
.card.flipped .card-back { transform: rotateY(0deg); }
/* translate3d for GPU layer promotion */
.animate { transform: translate3d(0, 0, 0); } /* forces GPU compositing */transform-origin
/* Default: center center (50% 50%) */
transform-origin: center;
transform-origin: top left; /* 0% 0% */
transform-origin: bottom right; /* 100% 100% */
transform-origin: 20px 40px;
transform-origin: 50% 100%; /* bottom center */
/* Scale from top-left */
.dropdown { transform-origin: top left; transform: scale(0); }
.dropdown.open { transform: scale(1); }Performance Notes
- transform is GPU-accelerated — it does NOT trigger layout or paint
- Use transform instead of animating top/left/width/height
- Applying any transform creates a stacking context and containing block for fixed children
will-change: transformhints the browser to promote the element to a GPU layer — use sparingly only for elements you know will animate
/* ✅ Performant movement */
transform: translateX(100px);
/* ❌ Causes layout reflow */
left: 100px; /* with position: relative/absolute */