3d转换
1)三维坐标系
x轴
y轴
z轴:垂直屏幕的方向,到眼睛这个方向是正值。
2)透视(视距)perspective
作用:好比,进入3d电影放映大厅,带上3d眼镜,坐到合适的位置(第1排还是最后1排)。
注意:
1)如果不设置透视,不能开启3d空间。
2)透视的值是px。
3)透视属性加给,被观察元素的父级元素。
3)3d位移
translateX()
translateY()
translateZ(),往外面是正值。
4)3d旋转
沿着x轴旋转:【耍单杠】,transform:rotateX(度数);
1)确定x轴的位置
2)确定旋转的方向(正值角度的方向、负值角度的方向)--左手准则
沿着y轴旋转:【钢管舞】,transform:rotateY(度数);
1)确定y轴的位置
2)确定旋转的方向(正值角度的方向、负值角度的方向)
沿着z轴旋转:【抽奖转盘】
5)3d呈现【******】transform-style:preserve-3d;
作用:让子元素保持3d效果。
用法:加给父元素。
|
|