Syntax

Transform

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

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

Overview

ClassDeclarations
transform:functiontransform: 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);

Translate

Scale

Skew

Rotate

Perspective

Matrix


Conditionally apply

Apply styles based on different states using selectors and applying conditionally.

<div class="transform:scale(1):hover transform:scale(1)@sm transform:scale(1)@dark transform:scale(1)@print"></div>
Design Token
Colors

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.