Syntax

Transform

Controlling rotate, scale, skew, or translate an element.

🚧This page is still under construction and some content may not be complete.

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,a2,b2,c2,d2,a3,b3,c3,d3,a4,b4,c4,d4)`	`transform: matrix3d(a1,b1,c1,d1,a2,b2,c2,d2,a3,b3,c3,d3,a4,b4,c4,d4);`

Conditionally apply

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>