Css3——3D转换

3D转换三维坐标系

三维坐标系其实就是指的立体空间，立体空间是由3个轴共同组成的。
x轴：水平向右 注意：x右边是正值，左边是负值
y轴：垂直个向下 注意：y下面是正值，上面是负值
z轴：垂直屏幕 注意：往外是正值，往里是负值

3D移动 translate3d

3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向
translform:translateX (100px):仅仅是在x轴上移动
translform:translateY (100px):仅仅是在y轴上移动
translform:translateZ (100px):仅仅是在z轴上移动 (注：z一般是用px单位)
translform:translate3d (x,yz):其中x,y,z分别指要移动的轴的方向的距离

透视 perspective（产生3D效果的作用）

在2D平面产生近大远小视觉立体，但是只是效果二维的
如果想要网页产生3D效果需要透视
模拟人类的视觉位置，可以认为安排一只眼睛去看
透视我们也称为视距：视距就是人的眼睛到屏幕的距离
距离视觉点越近在电脑平面成像越大，越远越小
透视的单位是像素
注：透视写在被观察元素的父盒子上面的
例：
Css

body {
            perspective: 200px;
        }

3D旋转rotate3d

3D旋转指可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转。
语法:
transform:rotateX(45deg):沿着x轴正方向旋转45度
transform:rotateY(45deg):沿着y轴正方向旋转45度
transform:rotateZ(45deg):沿着z轴正方向旋转45度
transform:rotate3d(x,y,z,deg):沿着自定义轴旋转deg为角度

3D呈现 transfrom-style

控制子元素是否开启三维立体环境。
transform-style:flat 子元素不开启3D立体空间 默认选项
transform-style:preserve-3d;子元素开启立体空间
代码写给父级，但是影响的是子盒子