透视及3D转换的应用

我们生活中的环境是3D的，其特点就是物体可以遮挡（背后的会被前面比其大的物体遮挡），离我们的眼睛越近的物体相对的就越大（近大远小），图片就是3D物体在2D平面上呈现的例子。

---

通过上面的描述，我们可以知道在2D平面产生近大远小视觉立体，但是只是效果二维的。 如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）。

透视

可以理解为模拟人类的视觉位置，可认为安排一只眼睛去看。
视距越小的在电脑平面成像越大，越大成像越小。
视距：模拟视觉与电脑屏幕的距离，单位是像素（px）

• 注：透视写在被观察元素的父盒子

案例：两面翻转

html：

一个父级盒子，两个同级子盒子

Css ：

通过定位和旋转将class=“back”的盒子翻转叠在class=“front”盒子背面，给父盒子box加伪类选择器和过渡，实现：两面翻转效果。按道理完成上面操作，即可实现效果。但事实上翻转过来显示的还是front盒子的背面，不是back盒子&