CSS3 3D转换
一、三维坐标系
三维坐标其实就是指立体空间，立体空间是由3个轴共同组成的。
- X轴：水平向右 X右边为正值，左边为负值
- Y轴：水平向下 Y下面为正值，上面为负值
- Z轴：垂直屏幕 往外面是正值，往里面是负值
二、3D位移：translate3d(x,y,z);
- transform:translateX(100px) ：仅仅在x轴上移动
- transform:translateY(100px) ：仅仅在y轴上移动
- transform:translateZ(100px) ：仅仅在z轴上移动 (translateZ 一般用px单位)
- transform:translate3d(x,y,z)：其中x,y,z 分别指要移动的方向的距离 (x,y,z没有值时使用0代替，不能不写)
三、3D旋转：rotate3d(x,y,z);
- 3D旋转可以让元素在三维平面内沿着X轴，Y轴，Z轴或者自定义轴进行旋转
- 语法：
- transform:rotateX(45deg) ：沿着X轴正方向旋转45度
- transform:rotateY(45deg) ：沿着Y轴正方向旋转45度
- transform:rotateZ(45deg) ：沿着Z轴正方向旋转45度
- transform:rotate3d(x,y,z,45deg) ：沿着自定义轴旋转45度
- rotateX:
- 判断元素旋转的方向，左手准则（左手手背面向眼睛，手伸直，大拇指伸直，弯曲四个拇指）
- 左手的大拇指指向的X轴的正方向
- 其余手指的弯曲 方向就是该元素沿着X旋转的方向
- rotateY：
- 左手的大拇指指向Y轴（向下）方向，其余手指弯曲方向就是该元素沿着Y轴旋转的方向（正值）
- 左手的大拇指指向Y轴（向下）方向，其余手指弯曲方向就是该元素沿着Y轴旋转的方向（正值）
- rotatZ：
- 左手的大拇指指向Y轴（指向自己）方向，其余手指弯曲方向就是该元素沿着Z轴旋转的方向（正值）
- 左手的大拇指指向Y轴（指向自己）方向，其余手指弯曲方向就是该元素沿着Z轴旋转的方向（正值）
- rotate3d(x,y,z,45deg)
- 沿着自定义轴旋转deg角度，X、Y、Z表示旋转轴的矢量
四、透视：perspective
- 在2D平面产生近大远小视觉立体，但是只是效果二维的
- 如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面）
- 模拟人类的视觉位置，可认为安排一只眼睛去看
- 透视我们也成为视距：视距就是人的眼睛到屏幕的距离
- 距离视觉点越近的在电脑平面成像越大，越远成像越小
- 透视的单位是像素
- 透视写在被观察元素的父盒子上面
五、3D呈现transform-style
- 控制子元素是否开启三维立体环境
- transform-style:flat 子元素不开启3d立体空间 默认值
- transform-style:preserve-3d; 子元素开启立体空间
- 代码写给父级，但是影响的是子盒子
博客只用于记录自己学习的东西，如有错误感谢留言斧正哦！