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-origin: functionpx;
translate(x,y)transform: translate(1529.432875104149rem,1529.388250682526rem);
translate3d(x,y,z)transform: translate3d(1531.3818826297502rem,1531.3799032424918rem,1531.386380278823rem);
translateX(x)transform: translateX(1533.1219507960302rem);
translateY(y)transform: translateY(1535.2911979187884rem);
translateZ(z)transform: translateZ(1536.7243451613056rem);
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(xdeg,ydeg);
skewX(x)transform: skewX(xdeg);
skewY(y)transform: skewY(ydeg);
rotate(angle)transform: rotate(angledeg);
rotate3d(x,y,z,angle)transform: rotate3d(xdeg,ydeg,zdeg,angledeg);
rotateX(value)transform: rotateX(valuedeg);
rotateY(value)transform: rotateY(valuedeg);
rotateZ(value)transform: rotateZ(valuedeg);
perspective(value)transform: perspective(valuepx);
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>
Syntax
touch-action

Setting how an element's region can be manipulated by a touchscreen user.

Syntax
transform-box

Defining the layout box to which transform and transform-origin properties relate.

© Aoyue Design LLC.