transform3d和2d的区别
1、3d多了一个参数
2、在移动端使用3d转换可以优化性能（如果移动设备有3d加速引擎 GPU ，可以提高性能）
一、rotate3d
rotateX(x轴旋转)，rotateY(y轴旋转)，rotateZ(z轴旋转)
（X轴旋转） （Y轴旋转） （Z轴旋转）
二、perspective(透视)
- 透视原理： 近大远小 。
- 浏览器透视：把近大远小的所有图像，透视在屏幕上。
- perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置
- perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素
比如给父元素设置perspective为201
子元素的transpaleZ()离201越近时就越大，到达200时满屏，超过201时消失（当一个东西超过了可视点，意味着在它你后面，眼睛是看不见后面的东西的）
开门的小例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.door{
border: 1px solid #ccc;
width: 300px;
height: 300px;
margin: 100px auto;
perspective:1000px;
}
.left{
float: left;
width: 50%;
height: 100%;
background-color: yellow;
transform-origin:left center;
transition:transform 1s linear;
}
.right{
display: inline-block;
width: 50%;
height: 100%;
background-color: red;
transform-origin:right center;
transition:transform 1s linear;
}
.door:hover .left{
transform:rotateY(60deg);
}
.door:hover .right{
transform:rotateY(-60deg);
}
</style>
</head>
<body>
<div class="door">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
注：个人笔记，参考：https://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/