3d_axes.png
必不可少的perspective属性
perspective属性的存在与否决定了你所看到的是2次元的还是3次元的，也就是是2D transform还是3D transform. 这不难理解，没有透视，不成3D.
toushi.png
不过CSS3 3D transform中的透视的透视点与上面的示例图是不同的：CSS3 3D transform的透视点是在浏览器的前方！
显示器中3D效果元素的透视点在显示器的上方（不是后面），近似就是我们眼睛所在方位！
3d-distance.jpg
translateZ帮你寻找透视位置
如果说rotateX/rotateY/rotateZ可以帮助理解三维坐标，则translateZ则可以帮你理解透视位置。
我们都知道近大远小的道理，对于没有rotateX以及rotateY的元素，translateZ的功能就是让元素在自己的眼前或近或远。
比方说，我们设置元素perspective为201像素，如下：
perspective: 201px;
则其子元素，设置的translateZ值越小，则子元素大小越小（因为元素远去，我们眼睛看到的就会变小）；translateZ值越大，该元素也会越来越大，当translateZ值非常接近201像素，但是不超过201像素的时候（如200像素），该元素的大小就会撑满整个屏幕（如果父辈元素没有类似overflow:hidden的限制的话）。因为这个时候，子元素正好移到了你的眼睛前面，所谓“一叶蔽目，不见泰山”，就是这么回事。当translateZ值再变大，超过201像素的时候，该元素看不见了——这很好理解：我们是看不见眼睛后面的东西的！
perspective属性的两种写法
- html：
<section class="container dark-red">
<div class="box"></div>
</section>
<section class="container dark-blue">
<div class="box"></div>
</section>
- css
.container{
display: block;
width: 200px;
height: 200px;
margin-bottom: 50px;
border: 1px solid #bbb;
}
.box{
width: 100%;
height: 100%;
opacity: .75;
}
**写法1（子元素设定视角）
.dark-red .box{
background-color: darkred;
transform: perspective(600px) rotateY(45deg);
}
**写法2（父元素设定视角）
.dark-blue{
perspective:600px;
}
.dark-blue .box {
background-color: darkblue;
transform: rotateY(-45deg);
}
具体Demo地址：https://jsfiddle.net/codeice/rLc1jg88/
上面的demo上下两个效果之所以会一样，是因为舞台上只有一个元素，因此，发生了巧合，其正好表现一样了。如果，如果舞台上有很多个元素，则两种书写形式的表现差异就会立马显示出来了！
如图：
透视元素不同的差异.png
图1：以父容器为透视元素
因此，显然，我们看到的每个子元素的形体都是不一样的
图2： 每个元素都有自己的一个视点，因此，显然，因为rotateY的角度是一样的，因此，看上去的效果也就一模一样了！
perspective-origin: x-position y-position;
perspective-origin这个属性其实就是好表示你那双眼睛所看的位置。默认就是所看舞台或元素的中心。有时候，我们对中心的位置是不感兴趣的，希望视线放在其他一些地方。
transform-style:preserve-3d
transform-style属性也是3D效果中经常使用的，其两个参数，flat|preserve-3d. 前者flat为默认值，表示平面的；后者preserve-3d表示3D透视(标明其子元素会被定位在这3d空间内)
backface-visibility：visible/hidden;
Hide the backside of a rotated <div> element:
隐藏或显示旋转元素背后的元素
网友评论