語法

變形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(1992.3235727581202rem,1992.324958157744rem);
translate3d(x,y,z)transform: translate3d(1994.4665753406505rem,1994.4672652271258rem,1994.46259150781rem);
translateX(x)transform: translateX(1998.1661402408613rem);
translateY(y)transform: translateY(2000.379766979953rem);
translateZ(z)transform: translateZ(2003.077312223679rem);
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>
語法
觸控操作

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

語法
變形框

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

© Aoyue Design LLC.