3D变换

开启3D空间

父元素必须开启3D空间
​transform-style​

1. ​flat​:让元素位于此元素的二维平面内(2D空间) —默认值
2. ​preserve-3d​:让子元素位于此元素的三维空间内(3D空间)

设置景深

指定观察者与z=0平面的距离,能让发生改变的3D元素产生透视效果
​perspective​

1. ​none​:不指定透视 —默认值
2. 长度值:指观察者距离z=0平面的距离,不允许负值

透视点位置

所谓透视点位置,就是观察者位置,默认的透视点在元素的中心
​perspective-origin​
第一个像素值越大越往右
第二个像素值越大越往下
默认是在最中间
通常情况下,我们不需要调整透视点位置

位移

3D位移是在2D位移的基础上,可以让元素沿z轴位移
​transform​
​translateZ​:设置z轴位移,正值向屏幕外,负值向屏幕里,且不能写百分比
​translate3d​:第一个参数对应x轴,第二个值参数对应y轴,第三个参数对应z轴,且都不能省略

旋转

3D位移是在2D位移的基础上,可以让元素沿x轴和y轴旋转
​transform​
​rotateX​:设置x轴旋转角度,需要指定一个角度值(deg),面对x轴正方向,正值顺时针,负值逆时针
​rotateY​:设置y轴旋转角度,需要指定一个角度值(deg),面对y轴正方向,正值顺时针,负值逆时针
​rotate3d​:前面三个值是否开启,0不旋转,1旋转;第四个参数表示旋转的角度,参数不能省略

缩放

3D位移是在2D位移的基础上,可以让元素沿z轴缩放
​transform​
​scaleZ​:设置Z轴方向的缩放比例,值为一个数字,1表示不缩放,大于1放大,小于1缩小,如果元素没有厚度,会调整景深
​scale3d​:第一个参数对应x轴,第二参数对应y轴,第三个参数对应z轴,参数不允许省略

多重变换

建议最后写旋转

背部

设置背部不可见
​backface-visibility: hidden​