Syntax
transform
Controlling rotate, scale, skew, or translate an element.
Overview
| Class | Declarations |
|---|---|
transform:`function` | transform: `function`;
|
translate(`x`,`y`) | transform: translate(`x`,`y`);
|
translate3d(`x`,`y`,`z`) | transform: translate3d(`x`,`y`,`z`);
|
translateX(`x`) | transform: translateX(`x`);
|
translateY(`y`) | transform: translateY(`y`);
|
translateZ(`z`) | transform: translateZ(`z`);
|
scale(`both`) | transform: scale(`both`);
|
scale(`x`,`y`) | transform: scale(`x`,`y`);
|
scale3d(`x`,`y`,`z`) | transform: scale3d(`x`,`y`,`z`);
|
scaleX(`x`) | transform: scaleX(`x`);
|
scaleY(`y`) | transform: scaleY(`y`);
|
scaleZ(`z`) | transform: scaleZ(`z`);
|
skew(`x`,`y`) | transform: skew(`x`,`y`);
|
skewX(`x`) | transform: skewX(`x`);
|
skewY(`y`) | transform: skewY(`y`);
|
rotate(`angle`) | transform: rotate(`angle`);
|
rotate3d(`x`,`y`,`z`,`angle`) | transform: rotate3d(`x`,`y`,`z`,`angle`);
|
rotateX(`value`) | transform: rotateX(`value`);
|
rotateY(`value`) | transform: rotateY(`value`);
|
rotateZ(`value`) | transform: rotateZ(`value`);
|
perspective(`value`) | transform: perspective(`value`);
|
matrix(`a`,`b`,`c`,`d`,`x`,`y`) | transform: matrix(`a`,`b`,`c`,`d`,`x`,`y`);
|
matrix3d(`a1`,`b1`,`c1`,`d1`) | transform: matrix3d(`a1`,`b1`,`c1`,`d1`);
|
Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="transform:scale(1):hover transform:scale(1)@sm transform:scale(1)@dark transform:scale(1)@print">…</div>