透视的分析及3D转换的应用

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

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

透视（perspective）

可以理解为模拟人类的视觉位置，可认为安排一只眼睛去看。

视距越小的在电脑平面成像越大，越大成像越小。

视距：模拟视觉与电脑屏幕的距离，单位是像素（px）

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

之前就写过3D转换的基础知识这里就不多讲，直接进入应用部分，更直观的理解3D效果的特点

案例：两面翻转

html：

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

    <div class="box">
        <div class="front">
            我爱喝百事可乐
        </div>
        <div class="back">
            百事可乐yyds
        </div>
    </div>

css：

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

这就要说到开篇所提的物体可以遮挡（背后的会被前面比其大的物体遮挡），所以当盒子旋转过来默认显示的还是front盒子的背面，想要实现效果，就必须将盒子背面隐藏。

backface-visibility: hidden;隐藏被旋转的 div 元素的背面

最后通过        transform-style: preserve-3d;（让盒子脱离2d平面以3d呈现）和透视来实现效果。

        body {
            perspective: 400px;
        }
        
        .box {
            width: 300px;
            height: 300px;
            margin: 50px auto;
            position: relative;
            transform-style: preserve-3d;
            transition: all 1s;
            cursor: pointer;
        }
        
        .box:hover {
            transform: rotateY(180deg);
        }
        
        .front,
        .back {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            font-size: 30px;
            color: aliceblue;
            text-align: center;
            border-radius: 50%;
            line-height: 300px;
            backface-visibility: hidden;
        }
        
        .back {
            background-color: tomato;
            transform: rotateY(180deg);
        }
        
        .front {
            background-color: yellowgreen;
            z-index: 1;
        }

效果图：