Mac版Safari无法正确渲染CSS 3D旋转的问题咨询

Mac版Safari在CSS 3D变换的渲染逻辑上确实存在一些与其他浏览器不同的特性，你的立方体仅显示两个面，主要是以下两个原因导致：

核心问题分析 #

1. 透视属性位置错误
   你将perspective属性直接应用在.cube元素上，但Safari要求透视效果必须作用于3D元素的父容器，而非元素自身。当perspective与transform-style: preserve-3d共存于同一元素时，Safari的渲染引擎会错误计算3D层级，导致部分面被隐藏。

2. 背面可见性未显式声明
   Mac版Safari对3D元素的背面裁剪逻辑更严格，即使面处于可见角度，若未显式设置backface-visibility，也可能被判定为不可见而不渲染。

解决方案 #

• 将perspective和transform-style: preserve-3d移至立方体的父元素（如body）
• 给所有立方体的面添加backface-visibility: visible
• 保留必要的-webkit前缀（兼容旧版本Safari）

修正后的代码 #

CSS 代码 #

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
} 

body {
    min-height: 100vh;
    background: #222;
    overflow: hidden;
    /* 将透视和3D样式移到父元素 */
    perspective: 5000px;
    transform-style: preserve-3d;
    -webkit-perspective: 5000px;
    -webkit-transform-style: preserve-3d;
}

.cube {
    position: absolute;
    top: 35%;
    left: 50%;
    transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    animation: rotate 10s linear infinite;
}

@keyframes rotate {
    0% {
        transform: translate(-50%, -50%) rotateX(0) rotateY(0);
        -webkit-transform: translate(-50%, -50%) rotateX(0) rotateY(0);
    }
    50% {
        transform: translate(-50%, -50%) rotateX(180deg) rotateY(180deg);
        -webkit-transform: translate(-50%, -50%) rotateX(180deg) rotateY(180deg);
    }
    100% {
        transform: translate(-50%, -50%) rotateX(360deg) rotateY(360deg);
        -webkit-transform: translate(-50%, -50%) rotateX(360deg) rotateY(360deg);
    }
}

.cube .side {
    width: 200px;
    height: 200px;
    background: red;
    position: absolute;
    /* 强制显示所有面的背面 */
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
}

.cube .side.back {
    transform: translateZ(-200px);
    -webkit-transform: translateZ(-200px);
}

.cube .side.right {
    transform-origin: 100% 50%;
    -webkit-transform-origin: 100% 50%;
    transform: rotateY(-90deg);
    -webkit-transform: rotateY(-90deg);
}

.cube .side.left {
    transform-origin: 0% 50%;
    -webkit-transform-origin: 0% 50%;
    transform: rotateY(90deg);
    -webkit-transform: rotateY(90deg);
}

.cube .side.top {
    transform-origin: 50% 0%;
    -webkit-transform-origin: 50% 0%;
    transform: rotateX(-90deg);
    -webkit-transform: rotateX(-90deg);
}

.cube .side.bottom {
    transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;
    transform: rotateX(90deg);
    -webkit-transform: rotateX(90deg);
}

HTML 代码 #

<div class="cube">
    <div class="side front"></div>
    <div class="side back"></div>
    <div class="side right"></div>
    <div class="side left"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
</div>

内容的提问来源于stack exchange，提问作者SilverStar069