深入探究CSS3 transform-style:preserve-3d

这些都是我参照文档以及自己试出来的理解。
至于对不对嘛，还要实践才知道。
来看嘛，打都打开，也许会有意想不到的收获呢！

默认值flat没什么好说的。

preserve-3d：指定子元素定位在三维空间内。

上效果解释，说服力满满滴！

<style>
    body {
        perspective: 800px;
        perspective-origin: 250px 300px;
    }
    .wrapper {
        position: relative;
        left: 200px;
        top : 200px;
        width: 100px;
        height: 200px;
        background-color: #0ff;
    }
    .demo {
        height: 100%;
        background-image: url("https://img0.baidu.com/it/u=3812362778,3741367888&fm=26&fmt=auto");
        background-size: cover;
        transform: translateZ(100px);
    }
</style>

<div class="wrapper">
    <div class="demo"></div>
</div>

先看看不设置preserve-3d的效果

就这？
怎么可能？如果是这么点知识，我都不好意思发出来了。
继续

说明这个属性值还是非常有探究的必要滴。所以耐心的看下去吧
我们用下面的例子来完整的认识preserve-3d

我在中间又加了一个红色的层。

<style>
    body {
        perspective: 800px;
        perspective-origin: 250px 300px;
    }
    .wrapper {
        position: relative;
        left: 200px;
        top : 200px;
        width: 100px;
        height: 200px;
        background-color: #0ff;
        transform-style: preserve-3d;
        transform : rotateY(30deg)
    }
    .bg-red {
        height: 100%;
        background-color: red;
        transform : translateZ(50px);
    }
    .demo {
        height: 100%;
        background-image: url("https://img0.baidu.com/it/u=3812362778,3741367888&fm=26&fmt=auto");
        background-size: cover;
        transform: translateZ(100px);
    }
</style>

<div class="wrapper">
    <div class="bg-red">
        <div class="demo"></div>
    </div>
</div>

如果我的解释都看的懂了，那么是不是很轻松就可以想到在bg-red的内部，再起一个3DENV。

OK，那我们来看看效果。

<style>
        body {
            perspective: 800px;
            perspective-origin: 250px 300px;
        }
        .wrapper {
            position: relative;
            left: 200px;
            top : 200px;
            width: 100px;
            height: 200px;
            background-color: #0ff;
            transform-style: preserve-3d;
            transform : rotateY(30deg)
        }
        .bg-red {
            height: 100%;
            background-color: red;
            transform-style: preserve-3d;
            transform : translateZ(50px);
        }
        .demo {
            height: 100%;
            background-image: url("https://img0.baidu.com/it/u=3812362778,3741367888&fm=26&fmt=auto");
            background-size: cover;
            transform: translateZ(100px);
        }
    </style>

    <div class="wrapper">
        <div class="bg-red">
            <div class="demo"></div>
        </div>
    </div>

是不是跟我的解释符合了，此时陈钰琪的那张图片跟红色背景处在不同的3DENV中，所以不是二维的叠加，是不是就会渲染出3D效果了呢。

如果你也喜欢陈钰琪，那么你至少就领悟到我想说的一半了兄弟。琪姐YYDS。

我在强调一点，以上都是我根据文档和自己的实践得出的结论
是否可以相信，请按照自己的理解
我还是很负责滴，至少我不会跟你说这样就百分百是对的。