设置景深：
//在父元素上设置 perspective: 200px; //或者 transform:perspective(300px);应用景深的元素称为“舞台元素”，舞台元素的所有后代元素都会受影响，（如果后代元素中也添加了perspective属性，效果会叠加而不是覆盖）；
CSS3 3D transform的透视点是在浏览器的前方，或者这么理解吧：显示器中3D效果元素的透视点在显示器的上方（不是后面），近似就是我们眼睛所在方位！ 比方说，一个1680像素宽的显示器中有张美女图片，应用了3D transform，同时，该元素或该元素父辈元素设置的perspective大小为2000像素。则这张美女多呈现的3D效果就跟你本人在1.2个显示器宽度的地方(1680*1.2≈2000)看到的真实效果一致！！设置的translateZ值越小，则子元素大小越小（因为元素远去，我们眼睛看到的就会变小）；
设置的translateZ值越大，该元素也会越来越大；
所以，当translateZ值非常接近201像素，但是不超过201像素的时候（如200像素），该元素的大小就会撑满整个屏幕（如果父辈元素没有类似overflow:hidden的限制的话）。因为这个时候，子元素正好移到了你的眼睛前面，所谓“一叶蔽目，不见泰山”，就是这么回事。当translateZ值再变大，超过201像素的时候，该元素看不见了——这很好理解：我们是看不见眼睛后面的东西的！
//css样式设置 <style> *{padding: 0;margin: 0;} #box1{ float: left; width: 300px; height: 300px; background-color: red; perspective:200px; position: relative; } #innerbox1{ position: absolute; width: 150px; height: 150px; left: 50%; top: 50%; margin-left: -75px; margin-top: -75px; background-color:green; //设置相同的perspective:200px;然后将子元素设置不同的translateZ。越大的translateZ，显示越大。 transform: translateZ(80px); //transform: translateZ(10px); } </style> //HTML设置 <body> <div id="box1"> <div id="innerbox1">inner1</div> </div> </body>景深越小，灭点越近，元素的变形越大；
//css样式的设置 <style> *{margin:0;padding:0;} /* 景深越大,灭点越远,元素的变形越小 景深越小,灭点越近,元素的变形越大 */ //设置一个盒子的样式 #wrap{float: left;width: 100px;height: 100px;padding: 100px;border: 1px solid;perspective: 200px;} #inner{transform: rotateX(120deg);} #inner{width: 100px;height: 100px;background-color: deeppink;transition: 2s;} //设置另外一个盒子的样式 #wrap1{float: left;width: 100px;height: 100px;padding: 100px;border: 1px solid;perspective: 600px;} #other{width: 100px;height: 100px;background-color: hotpink;transition: 2s;} #other{transform: rotateX(120deg);} </style> //HTML结构如下 <body> <div id="wrap"> <div id="inner">inner</div> </div> <div id="wrap1"> <div id="other">other</div> </div> </body>结果如下图：
