3D变换的x，y，z轴是分别效果是：
x轴旋转的话，就是头和脚进行转动
y轴旋转的话，就是左右手进行转动
z轴旋转的话，就是整个身体平铺在旋转。
上面是针对旋转的意思去，但是对于其他的类似一样，就是这样子去理解x，y，z轴的在哪里的
transform: rotateX(360deg);
transform: rotateY(360deg);
transform: rotateZ(360deg);
变换跟2D同理
最主要的区别是透视视图“景深”
<!--景深的作用：
1、让3D场景有近大远小的效果（就是肉眼距离屏幕的距离）
2、是一个不可以继承的。但他可以作用于后代元素（不是作用于本身的）
原理：
景深越大，灭点越远，元素变形更小
景深越小，灭点越近，元素变形更大
灭点：灭点就是你看到的尽头
景深基点：视角的位置
组合变换的话，放本身的话，一定要放在首位
如果要让景深有效果，又想放在本身的元素上，就需要进行组合处理。例如：
transform:perspective(100px) rotateX(360deg) ;
总体代码如图所示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #wrap{ width: 400px; height: 400px; position: absolute; top: 50%; left: 50%; margin-left: -200px; margin-top: -200px; border: 1px solid black; /*perspective: 100px;*/ } #inner{ width: 200px; height: 200px; position: absolute; top: 50%; left: 50%; margin-left: -100px; margin-top: -100px; border: 1px solid pink; border-radius: 50%; text-align: center; line-height: 200px; font-weight: bold; transition: 2s; } #wrap:hover #inner{ /*transform: rotateX(360deg); transform: rotateY(360deg); transform: rotateZ(360deg); transform: scaleX(2); transform: scaleZ(2);*/ /*transform: translateZ(100px);*/ transform:perspective(100px) rotateX(360deg) ; } </style> </head> <body> <div id="wrap"> <div id="inner"> Rainbow </div> </div> </body> </html>
-->