CSS空间转换

一、空间位移

语法：

transform: translate3d(x, y, z);

 transform: translateX(值);

transform: translateY(值);

 transform: translateZ(值);

取值：

像素单位数值 

百分比（以盒子自身尺寸为参照物）

二、透视

语法：perspective: 值;（添加给父级）

取值：像素单位数值， 数值一般在800 px– 1200px（表示眼睛到屏幕的距离）

作用 :空间转换时，为元素添加近大远小、近实远虚的视觉效果

三、空间旋转

语法 ：

 transform: rotateZ(值);  表示绕z轴旋转

 

transform: rotateX(值);  表示绕x轴旋转

 

transform: rotateY(值);表示绕y轴旋转

 

rotate3d(x, y, z, 角度度数)；很少用

确定旋转角度为正负方法：左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

 四、立体呈现

语法：transform-style: preserve-3d；给盒子父元素添加

实例：