perspective和perspective-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空间中，让元素有了立体感。