CSS之3D变换

CSS之3D变换：

首先要理解3D和2D的区别，有什么特点，下面我先介绍下我对3D变换的理解：

1、坐标系上3D是有3个坐标轴XYZ。

2、同样的物体根据距离眼睛的距离不同看上去的效果会不一样的大小。

3、从不同的角度看（上面，下面、左边等各个方位都会有不一样的效果

接下来，我就一个旋转螺旋体作为例子来说下3D的变换。

1、在上代码之前先简单说下旋3D变换所需要的结构：

1⃣️、景深（俗称视距，我的理解是眼睛和物体之间的距离）

2⃣️、舞台（3D效果所依赖的一个平台，通过舞台的旋转移动，可以让一个3D的图全方面各个角度展示在你的眼前）

3⃣️、3D图像（由各种元素通过旋转移动组成的一个具有3D效果的图像）

       2、HTML和CSS的代码，因为没用JS写我就简单加了几个元素，效果不是很好看，将鼠标放到红色边框的DIV上就会有一个旋转的螺旋效果。

<div class="eye">    //景深
		<div class="stage">   //舞台
			<div class="ele"></div>//由多个div组合的一个螺旋上升的图像
			<div class="ele"></div>
			<div class="ele"></div>
			<div class="ele"></div>
			<div class="ele"></div>
			<div class="ele"></div>
			<div class="ele"></div>
			<div class="ele"></div>
			<div class="ele"></div>
			<div class="ele"></div>
			<div class="ele"></div>
		</div>
	</div>

<span style="white-space:pre">		</span>.eye{<span style="white-space:pre">	</span><span style="color:#3333ff;">景深</span>
			<span style="color:#ff0000;">perspective:2400px;	</span>
			
		}
		.ele{  <span style="color:#3333ff;">元素</span>
			width: 30px;
			height: 30px;
			background-color: blue;
			<span style="color:#ff0000;">position: absolute;
			left: 0px;
			top: 0px;</span>
		}
		.stage{ <span style="color:#3333ff;"> 舞台</span>
			width: 30px;
			height: 30px;
			border:1px solid red;
			margin: 800px auto;
			<span style="color:#ff0000;">-webkit-transform-style: preserve-3d;</span>
			transition: 10s linear all;
			}
		.stage:hover{
			transform: rotateY(3600deg);
		}
		.stage:hover .ele{
			background: -webkit-repeating-radial-gradient(green,gold 20% );
		}
		.ele:nth-child(1){transform: translateY(15px) rotateY(0deg) translateZ(200px);}
		.ele:nth-child(2){transform: translateY(30px) rotateY(30deg) translateZ(200px);}
		.ele:nth-child(3){transform: translateY(45px) rotateY(60deg) translateZ(200px);}
		.ele:nth-child(4){transform: translateY(60px) rotateY(90deg) translateZ(200px);	}
		.ele:nth-child(5){transform: translateY(75px) rotateY(120deg) translateZ(200px);}
		.ele:nth-child(6){transform: translateY(90px) rotateY(150deg) translateZ(200px);}
		.ele:nth-child(7){transform: translateY(105px) rotateY(180deg) translateZ(200px);}
		.ele:nth-child(8){transform: translateY(120px) rotateY(210deg) translateZ(200px);}
		.ele:nth-child(9){transform: translateY(135px) rotateY(240deg) translateZ(200px);}
		.ele:nth-child(10){transform: translateY(150px) rotateY(270deg) translateZ(200px);}

3、下面我简单介绍下代码功能：

先从景深层往里说起吧，perspective:2400px;这就是设置眼睛和物体的距离，可以理解为上帝视角，宏观的观看整个元素组合的运动效果。距离越远你看到的元素组合越小（代码中是.ele的组合）。

景深层再往里面是舞台层，舞台就是承载元素组合的舞台，说的有点绕口，等讲完下面的元素组合你可能回过头来看可能就能够比较容易理解这个意思了。关键是-webkit-transform-style: preserve-3d;这个属性是用来设置舞台具有3D效果，其实说白了就是多了一个Z轴坐标系可以来移动舞台上的元素。

舞台里面就是3D元素的组合。position: absolute;   left: 0px;   top: 0px设置绝对定位其实就是为了让元素可以相对于这个舞台进行旋转，移动到预期位置更加方便，不设置绝对定位，只要移动到对应的位置其实效果是一样的，条条大路通罗马。如果设置绝对定位，最好还是个父级dia，也就是舞台设置一个position:relative;。接下来就是做元素的搬运工了，以第一个元素为例：.ele:nth-child(1){transform: translateY(15px) rotateY(0deg) translateZ(200px);}先将第一个元素（div）沿Y轴向下移动15个像素、绕Y轴旋转15度，再沿Z轴平移200像素。接下来的几个像素其实只是在数值上进行改变，仔细看应该不难理解。

当将所有的元素移动到预期的位置后，就可以进行旋转效果了，在代码中是通过鼠标移动到舞台这个div上，舞台就开始旋转，舞台旋转带动在舞台上的元素组合一起旋转，动态的3D效果就展现到你的眼前了。

注：1、无论是舞台的旋转运动，还是元素的旋转、移动。他们的坐标系都是自身坐标系，举个例子：元素原始状态是朝向屏幕外的，这时Z轴也是向 屏幕外的。当元素绕X轴向后旋转90度后，他的自身坐标系的Z轴也会跟着旋转，最后朝向屏幕上方。

2、还需要注意的一点是，无论是舞台还是元素，他们的旋转点默认是绕他们的中心点，旋转轴就是该点沿XY方向延伸的轴作为旋转轴。当我们要改变旋转的点的时候可以在对应的DIV上上设置transform-origin: Xpx Ypx;这里的X Y是相对于对应DIV的左上角进行 定位的。

以上是我对CSS中3D变换的一点见解，希望各位路过的大牛多多指点