透视属性：perspective与transform-style:preserve-3d的区别

1 perspective

该属性是可以给图像呈现立体感，但是，那仅仅只是一种3D的视觉感受，并没有真正的在3D环境中
我们可以通过下面这段代码来看效果。
HTML代码

    <div class="bc">
        <div class="dh">

        </div>
    </div>

CSS代码

        .bc {
            width: 800px;
            height: 800px;
            margin: 100px auto;
            background-color: rgba(0, 0, 0, 0.5);
            perspective: 500px;
        }
        
        .dh {
            width: 500px;
            height: 500px;
            background-color: royalblue;
            transform: rotateX(45deg);
        }

让我们来看看这段代码的效果

在该属性是很好的展示了3D效果，但是并没有让元素存在于3D空间，元素所处在的空间仍然是2D空间，只不过是展现了3D的效果。我们拿transform-style:preserve-3d属性来对比就知道了

2 transform-style:preserve-3d

这个属性是让元素处在了3D空间。我们通过下面的代码来看看效果
HTML代码

    <div class="bc">
        <div class="dh">

        </div>
    </div>

CSS代码

        .bc {
            width: 800px;
            height: 800px;
            margin: 100px auto;
            background-color: rgba(0, 0, 0, 0.5);
            transform-style: preserve-3d;
        }
        
        .dh {
            width: 500px;
            height: 500px;
            background-color: royalblue;
            transform: rotateX(45deg);
        }

我们用第一张图和第二张图来进行对比发现，第一张图呈现了3D效果，但是第二张图只是变窄了而且上面平白无故的出现了一块深蓝色，但是我的代码中并没有加这一种颜色，这一种颜色是怎么来的呢？
其实这就是transform-style:preserve-3d的作用，他让元素处在了一个3D空间，上面的深蓝色其实是父元素的背景色和子元素的背景色叠加而成，因为设置子元素沿X轴旋转45度，子盒子的上半部分旋转到了父盒子的后面，不信我们可以将父盒子沿Y轴转45度就知道了。
代码如下：
HTML代码

    <div class="bc">
        <div class="dh">

        </div>
    </div>

CSS代码

        .bc {
            width: 800px;
            height: 800px;
            margin: 100px auto;
            background-color: rgba(0, 0, 0, 0.5);
            transform-style: preserve-3d;
            transform: rotateY(45deg);
        }
        
        .dh {
            width: 500px;
            height: 500px;
            background-color: royalblue;
            transform: rotateX(45deg);
        }

从这张图我们就可以看到效果，子元素旋转了45度，而且他的上半部分还在父盒子的下面，这就是这两个最本质的区别，一个是假3D一个是真3D，一个只是实现视觉效果，一个是让元素存在3D空间中，让元素有了立体感。