技术交流QQ群:1027579432，欢迎你的加入！
欢迎关注我的微信公众号：CurryCoder的程序人生
1.现实中的3D有什么特点？
- 近大远小
- 物体后面遮挡不可见
- 三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。
- x轴：水平向右。注意：x右边是正值，左边是负值
- y轴：垂直向下。注意：y下面是正值，上面是负值
- z轴：垂直屏幕。注意：向外是正值，向内是负值
文章图片
3D坐标系.png
- 3D转换主要学习工作中最常用的3D位移和3D旋转。主要知识点有：
- 3D位移：translate3d(x, y, z);
- 3D旋转：rotate3d(x, y, z);
- 透视：perspective;
- 3D呈现transform-style;
- 3D移动在2D移动的基础上多增加了一个可以移动的方向，就是z轴方向。
- transform: translateX(100px); 仅仅是在x轴上进行移动；
- transform: translateY(100px); 仅仅是在y轴上进行移动；
- transform: translateZ(100px); 仅仅是在z轴上进行移动，translateZ一般用px为单位；
- transform: translate3d(x, y, z); 其中x、y、z分别指的是移动轴方向上的距离。
- 在2D平面上产生近大远小视觉立体，但是那仅仅效果是二维的。
- 如果想要在网页上产生3D效果，则需要透视（理解为3D物体投影在2D平面内）；
- 模拟人类的视觉位置，可认为安排一只眼睛去看；
- 透视我们也称为视距：视距就是人的眼睛到屏幕的距离；
- 距离视觉点越近的电脑平面成像越大，越远成像越小；
- 透视的单位是像素px；
文章图片
3D透视原理.png
- 透视写在被观察元素的父级盒子上，d就是视距，视距是一个距离，即人的眼睛到屏幕的距离。
- translateZ(100px)：仅仅是在Z轴上进行移动。有了透视以后，就能看到translateZ引起的变化了。
- z：指的是z轴，物体到屏幕的距离，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);
沿着自定义轴旋转deg度；
文章图片
rotateX和rotateY和rotateZ.png
- 对于元素旋转的方向判断：需要先学习一个左右准则。
- rotateX左手准则：
- 左手的大拇指所指向的方向就是x轴的正方向；
- 其余手指的弯曲方向就是该元素沿着x轴旋转的正方向；
文章图片
rotateX左手准则.png
- rotateY左手准则：
- 左手的大拇指所指向的方向就是y轴的正方向；
- 【25|25 CSS3中的3D转换】其余手指的弯曲方向就是该元素沿着y轴旋转的正方向；
文章图片
rotateY左手准则.png
文章图片
3D转换之transform-style呈现实际效果.png
- 控制子元素是否开启三维立体空间；
- transform-style: flat 子元素不开启3D立体空间，默认的；
- transform-style: preserve-3d; 子元素开启3D立体空间；
- 代码写在父级盒子上，但是影响的却是子盒子；
- 这个属性很重要，后面必用！
- 浏览器的私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。
- 私有前缀：
- -moz-:代表firefox浏览器私有属性；
- -ms-:代表ie浏览器私有属性；
- -webkit-:代表safari、chrome浏览器私有属性；
- -o-:代表Opera私有属性；
- 提倡写法：
-moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px;
- 笔记及代码，欢迎star,follow,fork......
