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>
-->
css之3D变换
原文地址：https://www.cnblogs.com/caicaihong/p/9629493.html