transform

介绍

transformCSS 属性能够让你平移、旋转、缩放一个页面元素。

语法

/* Function values */
transform: rotate(0.5turn);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3px);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);

/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: translate3d(10px, 0, 20px) rotateY(3deg);

transform属性的值可以为一个或多个<function>，它们之间使用空格分隔，详细介绍见function 标准语法

function 标准语法

• translate

translate( <length> | <percentage> , <length> | <percentage>? )

• translateX

translateX( <length> | <percentage> )

• translateY

translateY( <length> | <percentage> )

• translateZ

translateZ( <length> )

• translate3d

translate3d( <length> | <percentage> , <length> | <percentage> , <length> )

• rotate

rotate( [ <angle> | <zero> ] )

• rotateZ

rotateZ( [ <angle> | <zero> ] )

• rotateX

rotateX( [ <angle> | <zero> ] )

• rotateY

rotateY( [ <angle> | <zero> ] )

• scale

scale( <number> , <number>? )

• scaleX

scaleX( <number> )

• scaleY

scaleY( <number> )

与 Web 的区别

• 不支持 skew, perspective, rotate3d, scale3d