transform怎么控制层级

方法

给要控制层级的元素的父级设置transform-style: preserve-3d这个时候translateZ才有作用。

<div class="xxx-box">
    <div class="b1"></div>
    <div class="b2"></div>
</div>

.xxx-box {
    transform-style: preserve-3d;
    .b1,.b2 {
        width: 80px;
        height: 80px;
        opacity: 0.7;
    }
    .b1 {
        transform: translateZ(-1px);
        background-color: red;
    }
    .b2 {
        transform: translate(20px, -60px) translateZ(-2px);
        background-color: green;
    }
}

参考文档

Table of Contents