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轴旋转的方向（正值）
    
    
• rotatZ：
  • 左手的大拇指指向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; 子元素开启立体空间
• 代码写给父级，但是影响的是子盒子

博客只用于记录自己学习的东西，如有错误感谢留言斧正哦！

原文：https://www.cnblogs.com/ruiannan/p/12013597.html