1 .三维坐标系
三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。
x轴：水平向右 注意： x 右边是正值，左边是负值 \n y轴：垂直向下 注意： y 下面是正值，上面是负值\n z轴：垂直屏幕 注意： 往外面是正值，往里面是负值
3D 转换主要学习工作中最常用的 3D 位移 和 3D 旋转
主要知识点
- 3D位移: translate3d(x,y,z)
- 3D旋转: rotate3d(x,y,z)
- 透视: perspective
- 3D呈现 transfrom-style
1.2 3D移动 translate3d
3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。
1>translform:translateX(100px)：仅仅是在x轴上移动\n 2>translform:translateY(100px)：仅仅是在Y轴上移动\n 3>translform:translateZ(100px)：仅仅是在Z轴上移动（注意：translateZ一般用px单位）
4>transform:translate3d(x,y,z)：其中 x、y、z 分别指要移动的轴的方向的距离
因为z轴是垂直屏幕，由里指向外面，所以默认是看不到元素在z轴的方向上移动
1.3 透视 perspective
在2D平面产生近大远小视觉立体，但是只是效果二维的
1>如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）。
2>模拟人类的视觉位置，可认为安排一只眼睛去看
3>透视我们也称为视距：视距就是人的眼睛到屏幕的距离
4>距离视觉点越近的在电脑平面成像越大，越远成像越小
5>透视的单位是像素
透视写在被观察元素的父盒子上面的
d：就是视距，视距就是一个距离人的眼睛到屏幕的距离。
z：就是 z轴，物体距离屏幕的距离，z轴越大（正值） 我们看到的物体就越大。
1 .4 translateZ
translform:translateZ(100px)：仅仅是在Z轴上移动。\n 有了透视，就能看到translateZ 引起的变化了
1>translateZ：近大远小
2>translateZ：往外是正值
3>translateZ：往里是负值
1.5 3D旋转 rotate3d
3D旋转指可以让元素在三维平面内沿着 x轴，y轴，z轴或者自定义轴进行旋转。
语法
- transform:rotateX(45deg)：沿着x轴正方向旋转 45度
- transform:rotateY(45deg) ：沿着y轴正方向旋转 45deg\n
- transform:rotateZ(45deg) ：沿着Z轴正方向旋转 45deg
- transform:rotate3d(x,y,z,deg)： 沿着自定义轴旋转 deg为角度（了解即可）
左手准则
判断X轴正负值
左手的手拇指指向 x轴的正方向\n 其余手指的弯曲方向就是该元素沿着x轴旋转的方向
判断Y轴正负值
左手的手拇指指向 y轴的正方向\n 其余手指的弯曲方向就是该元素沿着y轴旋转的方向（正值）
transform:rotate3d(x,y,z,deg)： 沿着自定义轴旋转 deg为角度（了解即可）\nxyz是表示旋转轴的矢量，是标示你是否希望沿着该轴旋转，最后一个标示旋转的角度。
1>transform:rotate3d(1,0,0,45deg) 就是沿着x轴旋转 45deg
2>transform:rotate3d(1,1,0,45deg) 就是沿着对角线旋转 45deg
1.6 3D呈现 transfrom-style
控制子元素是否开启三维立体环境。。
- transform-style: flat 子元素不开启3d立体空间 默认的
- transform-style: preserve-3d; 子元素开启立体空间
- 代码写给父级，但是影响的是子盒子\n 这个属性很重要，后面必用
案例：两面翻转的盒子
<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n <title>Document</title>\n <style>\n body {\n perspective: 400px;\n }\n \n .box {\n position: relative;\n width: 300px;\n height: 300px;\n margin: 100px auto;\n transition: all .4s;\n /* 让背面的紫色盒子保留立体空间 给父级添加的 */\n transform-style: preserve-3d;\n }\n \n .box:hover {\n transform: rotateY(180deg);\n }\n \n .front,\n .back {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n font-size: 30px;\n color: #fff;\n text-align: center;\n line-height: 300px;\n }\n \n .front {\n background-color: pink;\n z-index: 1;\n }\n \n .back {\n background-color: purple;\n /* 像手机一样 背靠背 旋转 */\n transform: rotateY(180deg);\n }\n </style>\n</head>\n\n<body>\n <div class=\"box\">\n <div class=\"front\">快乐是我的</div>\n <div class=\"back\">也是你的</div>\n </div>\n</body>\n\n</html>案例：3D导航栏
<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n <title>Document</title>\n <style>\n * {\n margin: 0;\n padding: 0;\n }\n \n ul {\n margin: 100px;\n }\n \n ul li {\n float: left;\n margin: 0 5px;\n width: 120px;\n height: 35px;\n list-style: none;\n /* 一会我们需要给box 旋转 也需要透视 干脆给li加 里面的子盒子都有透视效果 */\n perspective: 500px;\n }\n \n .box {\n position: relative;\n width: 100%;\n height: 100%;\n transform-style: preserve-3d;\n transition: all .4s;\n }\n \n .box:hover {\n transform: rotateX(90deg);\n }\n \n .front,\n .bottom {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n }\n \n .front {\n background-color: pink;\n z-index: 1;\n transform: translateZ(17.5px);\n }\n \n .bottom {\n background-color: purple;\n /* 这个x轴一定是负值 */\n /* 我们如果有移动 或者其他样式，必须先写我们的移动 */\n transform: translateY(17.5px) rotateX(-90deg);\n }\n </style>\n</head>\n\n<body>\n <ul>\n <li>\n <div class=\"box\">\n <div class=\"front\">快乐是我的</div>\n <div class=\"bottom\">也是你的</div>\n </div>\n </li>\n <li>\n <div class=\"box\">\n <div class=\"front\">快乐是我的</div>\n <div class=\"bottom\">也是你的</div>\n </div>\n </li>\n <li>\n <div class=\"box\">\n <div class=\"front\">快乐是我的</div>\n <div class=\"bottom\">也是你的</div>\n </div>\n </li>\n <li>\n <div class=\"box\">\n <div class=\"front\">快乐是我的</div>\n <div class=\"bottom\"也是你的</div>\n </div>\n </li>\n <li>\n <div class=\"box\">\n <div class=\"front\">快乐是我的</div>\n <div class=\"bottom\">也是你的</div>\n </div>\n </li>\n <li>\n <div class=\"box\">\n <div class=\"front\">快乐是我的</div>\n <div class=\"bottom\">也是你的</div>\n </div>\n </li>\n </ul>\n</body>\n\n</html>