3D转换transform

3D转换transform

我们生活的环境是3D的，图片就是3D物体在2D平面呈现的例子

特点：  近大远小     物体后面遮挡不可见

三维坐标系

三维坐标系其实就是指定立体空间，立体空间是由3个轴共同组成的

X轴：水平向右    注意：x右边是正值，左边是负值

Y轴：垂直向下    注意：y下面是正值，上面是负值

Z轴：垂直屏幕    注意：往外面是正值，往里面是负值

1、3D移动translate3d

源代码

 

 

 

3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向

1. transform: translateX(100px); 仅仅是在x轴上移动
2. transform: translateY(100px); 仅仅是在y轴上移动
3. transform: translateZ(100px); 仅仅是在z轴上移动（注意：translateZ一般用px单位）
4. transform: translate3d(x,y,z); 其中x、y、z分别指要移动的轴的方向的距离

2、透视perspective

源代码

 

 

在2D平面产生近大远小视觉立体，但是只是效果二维的

1. 如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）
2. 模拟人类的视觉位置，可以为安排一只眼睛去看
3. 透视我们也称为视距：视距就是人的眼睛到屏幕的距离
4. 距离视觉点越近都在电脑平面成像越大，越远成像越小
5. 透视的单位是像素

透视写在被观察元素的父盒子上面的

3、旋转rotate3d

源代码

 

 

3D旋转指可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义进行旋转

1. transform: rotateX(45deg)：沿着x轴方向旋转45度
2. transform: rotateY(45deg)：沿着y轴方向旋转45deg
3. transform: rotateZ(45deg)：沿着z轴方向旋转45deg
4. transform: rotate3d(x,y,z,45deg)：沿着自定义轴旋转45deg为角度

4、呈现transform-style

源代码

 

 

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