三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。
- x轴：水平向右 注意： x 右边是正值，左边是负值
- y轴：垂直向下 注意： y 下面是正值，上面是负值
- z轴：垂直屏幕 注意： 往外面是正值，往里面是负值
3D位移translate3d
3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向
translform:translateX(100px)：仅仅是在x轴上移动translform:translateY(100px)：仅仅是在Y轴上移动translform:translateZ(100px)：仅仅是在Z轴上移动（注意：translateZ一般用px单位）transform:translate3d(x,y,z)：其中 x、y、z 分别指要移动的轴的方向的距离，且xyz不能省略，如果没有就写0
因为z轴是垂直屏幕，由里指向外面，所以默认是看不到元素在z轴的方向上移动，借助透视可以看到。
移动永远写在最前面，不然结果会变，即先移动，再旋转，除非个别不是移动永远写在最前面。
透视perspective
语法：
perspective:500px
透视：在2D平面产生近大远小视觉立体，但只是二维的
- 如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）
- 模拟人类的视觉位置，可认为安排一只眼睛去看
- 透视我们也称为视距：视距就是人的眼睛到屏幕的距离
- 距离视觉点越近的在电脑平面成像越大，越远成像越小
- 透视的单位是像素
透视写在被观察元素的父盒子上面的（不要求直系）
d：就是视距，视距就是一个距离人的眼睛到屏幕的距离。
z：就是 z轴，物体距离屏幕的距离，z轴越大（正值） 我们看到的物体就越大
translateZ
- translform:translateZ(100px)：仅仅是在Z轴上移动。
- 有了透视，就能看到translateZ 引起的变化了
- 近大远小
- 往外是正值
- 往里是负值
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为角度，1代表转了，0代表不转，(了解即可)
xyz是表示旋转轴的矢量，是标示你是否希望沿着该轴旋转，最后一个标示旋转的角度。
/*沿着X轴旋转45deg*/ transform: rotate3d(1,0,0,45deg) /*沿着对角线旋转45deg*/ transform: rotate3d(1,1,0,45deg)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>沿着x轴旋转</title>
<style>
body{
perspective: 150px;
}
div{
width: 200px;
height: 200px;
background-color: rgb(255, 0, 0);
margin: 100px auto;
transition: all 1s;
}
div:hover{
transform: rotateX(360deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
结果演示
3D呈现transform-style
- 控制子元素是否开启三维立体环境
transform-style: flat子元素不开启3d立体空间 默认的transform-style: preserve-3d子元素开启立体空间- 代码写在父级(要求直系），但影响的是子盒子
测试：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试</title>
<style>
body{
perspective: 500px;
}
.box{
position: relative;
width: 300px;
height: 300px;
margin: 100px auto;
transition: all 2s;
/* 让子元素保持3d立体空间环境，也是看见立体效果的必备条件 */
transform-style: preserve-3d;
}
.box:hover{
/* 旋转父盒子，才能看到子盒子，即所有子元素的内容*/
transform: rotateY(60deg);
}
.box div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: pink;
}
.box div:last-child {
background-color: purple;
transform: rotateX(60deg);
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
</div>
</body>
</html>
结果演示
浏览器私有前缀
- -moz- :Firefox浏览器
- -ms- :IE浏览器
- -webkit- :safari、chrome浏览器
- -o- :Opera浏览器
提倡写法（组合写）：
-moz-border-radius:10px; border-radius:10px
