3D转换
3D 转换
我们生活的环境是3D的，照片就是3D物体在2D平面呈现的例子。
**有什么特点：**
近大远小。
物体后面遮挡不可见。
当我们在网页上构建3D效果的时候参考这些特点就能产出3D效果。
1. 三维坐标系
三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。
x轴 ： 水平向右 注意： x右边是正值，左边是负值。
y轴 ： 垂直向下 注意 ： y下面是正值，上面是负值。
z轴 ： 垂直屏幕 注意 ： 往外面是正值，往里面是负值。
3D 转换我们主要学习工作中最常用的3D位移 和 3D 旋转
主要知识点
3D位移：translate3d（x，y，z）
3D旋转：rotate3d（x，y，z）
透视：perspective
3D呈现transform-style
2. 3D移动 translate3d
3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。
translform：translateX（100px） ： 仅仅是在x轴上移动
translform：translateY（100px） ： 仅仅是在Y轴上移动
translform：translateZ（100px） ： 仅仅是在Z轴上移动(注意：translateZ一般用px单位)
translform：translate3d（x，y，z） ： 其中x,y,z分别指要移动的轴的方向的距离
举个例子：
命令演示：
Document
上述是所有命令的演示。
3. 透视：perspective
在2D平面产生近大远小视觉立体，但是只是效果二维的。
如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）。
模拟人类的视觉位置，可认为安排一只眼睛去看。
距离视觉点越近的在电脑平面成像越大，越远成像越小。
透视的单位是像素。
透视写在被观察元素的父盒子上面的：
d ： 就是视距，视距就是一个距离人的眼睛到屏幕的距离。
z ： 就是z轴，物体距离屏幕的距离，z轴越大（正值） 我们看到的物体就越大。
5. 3D旋转 rotate3d
3D旋转只可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转。
语法：
transform：rotateX（45deg） ： 沿着x轴正方向旋转45%
transform：rotateY（45deg） ： 沿着y轴正方向旋转45%
transform：rotate3d（x,y,z,deg） ：沿着自定义轴旋转deg为角度（了解即可）
1. xyz是表示旋转轴的矢量，是标示你是否希望沿着该轴的旋转，最后一个表示旋转的角度。
transform:rotate3d(1,0,0,45deg)就是沿着x轴旋转 45deg
transform:rotate3d(1,1,0,45deg)就是沿着x轴旋转 45deg
举个例子：
命令演示：
Document
"images/p_small_0010.jpg">
网页示图：
这是旋转X轴的。
这是旋转Y轴的。
这是Z轴的。
这是表示旋转轴的矢量。
左手准则
左手的手拇指指向x轴的正方向。
其余手指的弯曲方向就是该元素沿着x轴旋转的方向。
左手准则
左手的手拇指指向Y轴的正方向。
其余手指的弯曲方向就是该元素沿着Y轴旋转的方向(正值)。
6. 3D呈现transform-style
控制子元素是否开启三维立体环境。
transform-style：flat子元素不开启3d立体空间 默认的。
transf-style：preserve-3d；子元素开启立体空间。
代码写给父级，但是影响的是子盒子。
这个属性很重要，后面必用。
举个例子：
命令演示：
Document
"box">
网页视图：
接下来让我们做一个案例
实现步骤
- 搭建HTML结构
"box">
"front">
"back">
box父盒子里面包含前后两个子盒子。
box是翻转的盒子 front是前面盒子back是后面盒子。
2. css样式
box指定大小，切记要添加3d呈现。
back盒子要沿着Y轴翻转180度。
最后鼠标经过box沿着旋转180deg。
命令演示：
Document
"box">
"front">csdn chenyiboke
"back">等你关注
网页视图：
