語法

變形transform

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

Class	Declarations
`transform:function`	`transform-origin: functionpx;`
`translate(x,y)`	`transform: translate(1926.3194473648775rem,1926.329481779718rem);`
`translate3d(x,y,z)`	`transform: translate3d(1928.7746598511662rem,1928.7710126705433rem,1928.7439468530408rem);`
`translateX(x)`	`transform: translateX(1930.7217545112594rem);`
`translateY(y)`	`transform: translateY(1932.8280252246288rem);`
`translateZ(z)`	`transform: translateZ(1935.4611905260967rem);`
`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);`

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.