transform
Rotating, scaling, skewing or translating an element.
Overview
| Class | Declarations |
|---|---|
transform:none | transform: none;
|
transform:<function> | transform: <function>;
|
transform:translate(<x>,<y>) | transform: translate(<x>,<y>);
|
transform:translate3d(<x>,<y>,<z>) | transform: translate3d(<x>,<y>,<z>);
|
transform:translateX(<x>) | transform: translateX(<x>);
|
transform:translateY(<y>) | transform: translateY(<y>);
|
transform:translateZ(<z>) | transform: translateZ(<z>);
|
transform:scale(<both>) | transform: scale(<both>);
|
transform:scale(<x>,<y>) | transform: scale(<x>,<y>);
|
transform:scale3d(<x>,<y>,<z>) | transform: scale3d(<x>,<y>,<z>);
|
transform:scaleX(<x>) | transform: scaleX(<x>);
|
transform:scaleY(<y>) | transform: scaleY(<y>);
|
transform:scaleZ(<z>) | transform: scaleZ(<z>);
|
transform:skew(<x>,<y>) | transform: skew(<x>,<y>);
|
transform:skewX(<x>) | transform: skewX(<x>);
|
transform:skewY(<y>) | transform: skewY(<y>);
|
transform:rotate(<angle>) | transform: rotate(<angle>);
|
transform:rotate3d(<x>,<y>,<z>,<angle>) | transform: rotate3d(<x>,<y>,<z>,<angle>);
|
transform:rotateX(<value>) | transform: rotateX(<value>);
|
transform:rotateY(<value>) | transform: rotateY(<value>);
|
transform:rotateZ(<value>) | transform: rotateZ(<value>);
|
transform:perspective(<value>) | transform: perspective(<value>);
|
transform:matrix(<a>,<b>,<c>,<d>,<x>,<y>) | transform: matrix(<a>,<b>,<c>,<d>,<x>,<y>);
|
transform:matrix3d(<a1>,<b1>,<c1>,<d1>) | transform: matrix3d(<a1>,<b1>,<c1>,<d1>);
|
Examples
Move an element
Hover or keyboard-focus the native button to move it upward by 8px. The dashed outline marks the original layout slot.
<!-- Translate upward · hover or focus --><div class="p-lg"> <div class="rel h:96px w:160px outline:1px|dashed|var(--color-line-muted)"> <button id="target" type="button" class="grid place-items:center h:96px w:160px p-sm b:1px|solid|var(--color-blue-60) r-sm font-sm bg-blue-10 fg-blue-80 transform:none outline:2px|solid|var(--color-blue):focus-visible outline-offset:3px:focus-visible transform:none@print transition:transform|var(--duration-fast)|ease-out@motion transform:translateY(-8px):hover@screen transform:translateY(-8px):focus-visible@screen"> Lift layer </button> </div></div>Generated CSS
@layer utilities { .transform\:translateY\(-8px\) { transform: translateY(-8px) }}The button moves visually while its layout slot stays in place. Transforms can still affect overflow, stacking and containing blocks. The transition runs only when the user allows motion; print restores the original position.
Scale pressed controls
Hold the button with a pointer, or focus it and hold Space. Its native active state scales the painted control to 90% while the original slot remains visible.
<!-- Scale while pressed · native button --><div class="p-lg"> <div class="rel h:96px w:160px outline:1px|dashed|var(--color-line-muted)"> <button id="target" type="button" class="grid place-items:center h:96px w:160px p-sm b:1px|solid|var(--color-blue-60) r-sm font-sm bg-blue-10 fg-blue-80 transform:none outline:2px|solid|var(--color-blue):focus-visible outline-offset:3px:focus-visible transform:none@print transition:transform|var(--duration-fast)|ease-out@motion transform:scale(.9):active@screen"> Press and hold </button> </div></div>Releasing the button restores its size. A transform does not change its accessible name or replace native button behavior. The measured painted bounds differ from its unchanged layout dimensions.
Rotate or skew decorative elements
Compare a 12-degree rotation with a 12-degree horizontal skew. Both layers begin in the same 160 × 96 layout slot.
<!-- Rotate · around the center --><div class="p-lg"> <div class="rel h:96px w:160px outline:1px|dashed|var(--color-line-muted)"> <div id="target" class="grid place-items:center h:96px w:160px p-sm b:1px|solid|var(--color-blue-60) r-sm font-sm bg-blue-10 fg-blue-80 transform:rotate(12deg)"> Rotated layer </div> </div></div><!-- Skew · horizontal shear --><div class="p-lg"> <div class="rel h:96px w:160px outline:1px|dashed|var(--color-line-muted)"> <div id="target" class="grid place-items:center h:96px w:160px p-sm b:1px|solid|var(--color-blue-60) r-sm font-sm bg-blue-10 fg-blue-80 transform:skewX(-12deg)"> Skewed layer </div> </div></div>Reserve room for the transformed corners. Multiple functions belong in one class, such as transform:rotate(12deg)|skewX(-12deg); their order changes the result. A later transform value replaces the complete function list.
Set the pivot separately
The top-right pivot stays fixed while this layer scales to 75%. The violet marker belongs to the surrounding guide, so it is not transformed with the blue layer.
<!-- Top-right pivot · unchanged anchor --><div class="p-lg"> <div class="rel h:96px w:160px outline:1px|dashed|var(--color-line-muted)"> <div id="target" class="grid place-items:center h:96px w:160px p-sm b:1px|solid|var(--color-blue-60) r-sm font-sm bg-blue-10 fg-blue-80 transform:scale(.75) transform-origin:top|right"> Scaled layer </div> <span aria-hidden="true" class="abs right:-3px top:-3px width:6px height:6px r:100% bg-violet-60 untouchable"></span> </div></div>Use transform-origin to choose the pivot independently of the transform. The dashed rectangle keeps the original size and location visible.
Apply conditionally
Widen the actual viewport to sm to translate the layer 24px to the right. Print removes the transform at every page width.
<!-- Original → translated at sm --><div class="p-lg"> <div class="rel h:96px w:160px outline:1px|dashed|var(--color-line-muted)"> <div id="target" class="grid place-items:center h:96px w:160px p-sm b:1px|solid|var(--color-blue-60) r-sm font-sm bg-blue-10 fg-blue-80 transform:none transform:none@print transform:translateX(24px)@screen@sm"> Layer 01 </div> </div></div>The responsive rule changes actual transform paint. The layout guide remains fixed, and the live matrix reports the browser’s resolved transformation.