Safari浏览器下3D transform和z-index层级渲染问题实例页面

展示

代码

CSS代码：

.bar {
    height: 30px;
    background-color: #cd0000;
    position: fixed; 
    left: 0; right: 0; top: 120px;
    /* Safari下z-index无效 */
    z-index: 99;
}
.box {
    text-align: center;
}
.rotate {
    transform: perspective(300px) rotateY(40deg);
}
            

HTML代码：

<div class="bar"></div>
<div class="box">
    <img class="rotate" src="mm1.jpg">
</div>