Syntax
transform
Controlling rotate, scale, skew, or translate an element.
Overview
| Class | Declarations |
|---|---|
transform:function | transform-origin: functionpx;
|
translate(x,y) | transform: translate(1727.6839557825635rem,1727.6553841588004rem);
|
translate3d(x,y,z) | transform: translate3d(1729.8353622701547rem,1729.8323273125236rem,1729.809665785221rem);
|
translateX(x) | transform: translateX(1732.45352870049rem);
|
translateY(y) | transform: translateY(1734.515836092718rem);
|
translateZ(z) | transform: translateZ(1736.952142016013rem);
|
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>