2d转换
transform：none | <transform-function>+
默认值：none
适用于：所有块级元素及某些内联元素
transform:rotate(<angle>)旋转一个角度-
transform:translate(<translation-value>[,<translation-value>]?)- 在X轴[Y轴]?移动一个距离
- transform:translateX
- transform:translateY
- 默认为0
- 百分数参照物为当前盒子的大小
-
transform:scale(<number>[,<number>]?)- 缩放倍数
- 第二个参数省略默认跟第一个值相等
-
transform:skew(<angle>[,<angle>]?)- 倾斜一个角度
- 第二个参数默认为0
transform-origin 定位坐标轴的原点
transform-origin：[ <percentage> | <length> | left | center① | right ] [ <percentage> | <length> | top | center② | bottom ]?
- 默认值：
50% 50%，效果等同于center center - 适用于：所有块级元素及某些内联元素
- 设置或检索对象以某个原点进行转换。
- 该属性提供2个参数值。
- 如果提供两个，第一个用于横坐标，第二个用于纵坐标。
- 如果只提供一个，该值将用于横坐标；纵坐标将默认为50%。
- 如果提供3个，第三个用于z轴
3d转换
- 透视距离
perspective：none | <length>
用在变换元素的容器上
<length>： 指定观察者距离「z=0」平面的距离，为元素及其内容应用透视变换。不允许负值
- perspective-origin 设置透视点
perspective-origin：[ <percentage> | <length> | left | center① | right ] [ <percentage> | <length> | top | center② | bottom ]?
语法跟transform-origin类似
- 指定透视点的位置。
- 该属性提供2个参数值。
- 如果提供两个，第一个用于横坐标，第二个用于纵坐标。
- 如果只提供一个，该值将用于横坐标；纵坐标将默认为center。
- translate3d()
translate3d()： 指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略
translatex()： 指定对象X轴（水平方向）的平移
translatey()： 指定对象Y轴（垂直方向）的平移
translatez()： 指定对象Z轴的平移
- rotate3d()： 3d旋转
rotate3d()： 指定对象的3D旋转角度，其中前3个参数分别表示旋转的方向x,y,z，第4个参数表示旋转的角度，参数不允许省略
rotatex()： 指定对象在x轴上的旋转角度
rotatey()： 指定对象在y轴上的旋转角度
rotatez()： 指定对象在z轴上的旋转角度
demo:rotate(0,0,1,45deg)
- scale()： 3d缩放
scale3d()： 指定对象的3D缩放。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略
scalez()： 指定对象的z轴缩放
scalex()： 指定对象X轴的（水平方向）缩放
scaley()： 指定对象Y轴的（垂直方向）缩放
- transform-style：设置一个3d平台，保留内部的3d空间
transform-style：flat | preserve-3d
默认值：flat
+ flat： 指定子元素位于此元素所在平面内
+ preserve-3d： 指定子元素定位在三维空间内
+ 当该属性值为「preserve-3d」时，元素将会创建局部堆叠上下文。
+ 决定一个变换元素看起来是处在三维空间还是平面内，需要该元素的父元素上定义 <' transform-style '> 属性。
- backface-visibility
backface-visibility：visible | hidden
不可继承
默认值:visible
+ visible： 指定元素背面可见，允许显示正面的镜像。
+ hidden： 指定元素背面不可见
