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

编程入门行业动态更新时间:2024-10-22 21:40:03

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);
        }