CSS 3D立方体动画在Safari浏览器无法运行求助

问题背景 #

我实现的立方体旋转动画在Chrome、Firefox中显示正常，但在Safari里完全无法呈现3D效果。已经添加了浏览器厂商前缀，且通过caniuse确认新版Safari支持CSS 3D特性，但问题依旧存在。

原代码 #

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="cube">
        <div class="back">Back</div>
        <div class="top">Top</div>
        <div class="bottom">Bottom</div>
        <div class="left">Left</div>
        <div class="right">Right</div>
        <div class="front">Front</div>
    </div>
</body>
</html>

CSS

@keyframes myAnimation {
  from {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  to {
    -webkit-transform: rotateY(360deg) rotateZ(360deg);
    -moz-transform: rotateY(360deg) rotateZ(360deg);
    -o-transform: rotateY(360deg) rotateZ(360deg);
    transform: rotateY(360deg) rotateZ(360deg);
  }
}
@-webkit-keyframes myAnimation {
  from {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  to {
    -webkit-transform: rotateY(360deg) rotateZ(360deg);
    -moz-transform: rotateY(360deg) rotateZ(360deg);
    -o-transform: rotateY(360deg) rotateZ(360deg);
    transform: rotateY(360deg) rotateZ(360deg);
  }
}
.cube {
  transition: transform 2s;
  transform: rotateY(0deg);
  position: absolute;
  width: 100px;
  height: 100px;
  animation: myAnimation 3s infinite linear;
  -webkit-animation: myAnimation 3s infinite linear;
  -moz-animation: myAnimation 3s infinite linear;
  -o-animation: myAnimation 3s infinite linear;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  left: 50%;
  top: 50%;
}

div:not(.cube) {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  -webkit-transform-origin: 0% 0%;
  -moz-transform-origin: 0% 0%;
  -o-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.8;
}

.front {
  background-color: gray;
}

.back {
  -webkit-transform: translateZ(-100px);
  -moz-transform: translateZ(-100px);
  -o-transform: translateZ(-100px);
  transform: translateZ(-100px);
  background-color: green;
}

.top {
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  -o-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  background-color: red;
}

.bottom {
  -webkit-transform: translateY(100px) rotateX(-90deg);
  -moz-transform: translateY(100px) rotateX(-90deg);
  -o-transform: translateY(100px) rotateX(-90deg);
  transform: translateY(100px) rotateX(-90deg);
  background-color: blue;
}

.left {
  -webkit-transform: rotateY(90deg);
  -moz-transform: rotateY(90deg);
  -o-transform: rotateY(90deg);
  transform: rotateY(90deg);
  background-color: yellow;
}

.right {
  -webkit-transform: translateX(100px) rotateY(90deg);
  -moz-transform: translateX(100px) rotateY(90deg);
  -o-transform: translateX(100px) rotateY(90deg);
  transform: translateX(100px) rotateY(90deg);
  background-color: brown;
}

问题分析与修复方案 #

Safari对CSS 3D变换的渲染有几个特殊要求，原代码未满足这些条件导致失效，以下是针对性修复：

1. 添加透视上下文
   Safari需要明确的perspective属性触发3D渲染环境，给body添加如下样式：

body {
  margin: 0;
  height: 100vh;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

2. 修正动画前缀混用问题
   @-webkit-keyframes中只需保留-webkit-transform，其他厂商前缀会干扰Safari解析，重新定义动画：

@-webkit-keyframes myAnimation {
  from {
    -webkit-transform: rotateY(0deg);
  }
  to {
    -webkit-transform: rotateY(360deg) rotateZ(360deg);
  }
}
@keyframes myAnimation {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg) rotateZ(360deg);
  }
}

3. 优化3D渲染属性
   给立方体的面添加backface-visibility: hidden，解决Safari背面渲染异常问题：

div:not(.cube) {
  /* 原有属性保持不变 */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

4. 修正居中定位
   原代码仅设置left:50%;top:50%，未偏移自身宽高一半导致位置偏移，修改立方体样式：

.cube {
  /* 原有属性保持不变 */
  transform: rotateY(0deg) translate(-50%, -50%);
  -webkit-transform: rotateY(0deg) translate(-50%, -50%);
}

整合以上修改后，Safari即可正常显示3D立方体旋转效果。

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