为什么转换不能在Safari浏览器中工作？

Question

<style>
    * {
        margin: 0;
        padding: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }



    .main-cube-wrapper {
        height: 80px;
        position: relative;
        margin-top: 2rem;
    }

    .wrap {
        -webkit-perspective: 1000px;
        perspective: 1000px;
        -webkit-perspective-origin: 50% 50%;
        perspective-origin: 50% 50%;
    }

    .cube {
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        width: 80px;
        height: 80px;
        margin: auto;
        -webkit-animation-name: rotate;
        animation-name: rotate;
        -webkit-animation-duration: 30s;
        animation-duration: 30s;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
    }

    .cube div {
        position: absolute;
        opacity: 0.7;
        width: 80px;
        height: 80px;
    }

    .face-1 {
        background: red;
        -webkit-transform: rotateY(0deg) translateZ(40px);
        transform: rotateY(0deg) translateZ(40px);
    }

    .face-2 {
        background: green;
        -webkit-transform: rotateY(90deg) translateZ(40px);
        transform: rotateY(90deg) translateZ(40px);
    }

    .face-3 {
        background: blue;
        -webkit-transform: rotateY(180deg) translateZ(40px);
        transform: rotateY(180deg) translateZ(40px);
    }

    .face-4 {
        background: yellow;
        -webkit-transform: rotateY(-90deg) translateZ(40px);
        transform: rotateY(-90deg) translateZ(40px);
    }

    .face-5 {
        background: purple;
        -webkit-transform: rotateX(90deg) translateZ(40px);
        transform: rotateX(90deg) translateZ(40px);
    }

    .face-6 {
        background: orange;
        -webkit-transform: rotateX(-90deg) translateZ(40px);
        transform: rotateX(-90deg) translateZ(40px);
    }

    @-webkit-keyframes rotate {
        0% {
            -webkit-transform: rotate3d(0, 0, 0, 0);
            transform: rotate3d(0, 0, 0, 0);
        }

        100% {
            -webkit-transform: rotate3d(0, 1, 0, 360deg);
            transform: rotate3d(0, 1, 0, 360deg);
        }
    }

    @keyframes rotate {
        0% {
            -webkit-transform: rotate3d(0, 0, 0, 0);
            transform: rotate3d(0, 0, 0, 0);
        }

        100% {
            -webkit-transform: rotate3d(0, 1, 0, 360deg);
            transform: rotate3d(0, 1, 0, 360deg);
        }
    }
</style>


<div class="main-cube-wrapper">
    <div class="wrap">
        <div class="cube">
            <div class="face-1"></div>
            <div class="face-2"></div>
            <div class="face-3"></div>
            <div class="face-4"></div>
            <div class="face-5"></div>
            <div class="face-6"></div>
        </div>
    </div>
</div>

我正在学习和工作的一些项目，我已经创建了旋转立方体使用SCSS，我已经检查了立方体翻译或旋转在每个浏览器，除了'Safari浏览器‘。谁能帮我解决这个问题，这样立方体也可以在safari浏览器中旋转和正常工作。

Answer 1

参见下面的更新

看起来Safari在rotate3d上有问题。只需在Safari浏览器上测试此示例即可。使用rotateZ的最后一个旋转应该可以工作。

​

div {
  width: 100px;
  height: 100px;
  background: red;
  margin: 20px;
}

.rotate-2d { -webkit-animation: rotate-2d 1s linear infinite; }
.rotate-3d { -webkit-animation: rotate-3d 1s linear infinite; }
.rotate-3d-v2 { -webkit-animation: rotate-3d-v2 1s linear infinite; }
div:after {
  content: 'A';
  display: inline-block;
  width: 10px;
  height: 20px;
  color: green;
  font-size: 100px;
}

@-webkit-keyframes rotate-2d {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@-webkit-keyframes rotate-3d {
  0% {
    -webkit-transform: rotate3d(0,0,1,0deg);
  }
  100% {
    -webkit-transform: rotate3d(0,0,1,360deg);
  }
}

@-webkit-keyframes rotate-3d-v2 {
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(360deg);
  }
}

<div class="rotate-2d"></div>
<div class="rotate-3d"></div>
<div class="rotate-3d-v2"></div>

​

更新

似乎Safari有一个问题来认识到两个关键框架之间的变化。添加中间关键帧似乎解决了这个问题：

​

.main-cube-wrapper {
  height: 180px;
  position: relative;
  margin-top: 2rem;
}

.wrap {
  -webkit-perspective: 1000px;
  perspective: 1000px;
  -webkit-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
}

.cube {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  width: 80px;
  height: 80px;
  margin: auto;
  -webkit-animation-name: rotate;
  animation-name: rotate;
  -webkit-animation-duration: 30s;
  animation-duration: 30s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.cube div {
        position: absolute;
        opacity: 0.7;
        width: 80px;
        height: 80px;
    }

.face-1 {
  background: red;
  -webkit-transform: rotateY(0deg) translateZ(40px);
  transform: rotateY(0deg) translateZ(40px);
}

.face-2 {
  background: green;
  -webkit-transform: rotateY(90deg) translateZ(40px);
  transform: rotateY(90deg) translateZ(40px);
}

.face-3 {
  background: blue;
  -webkit-transform: rotateY(180deg) translateZ(40px);
  transform: rotateY(180deg) translateZ(40px);
}

.face-4 {
  background: yellow;
  -webkit-transform: rotateY(-90deg) translateZ(40px);
  transform: rotateY(-90deg) translateZ(40px);
}

.face-5 {
  background: purple;
  -webkit-transform: rotateX(90deg) translateZ(40px);
  transform: rotateX(90deg) translateZ(40px);
}

.face-6 {
  background: orange;
  -webkit-transform: rotateX(-90deg) translateZ(40px);
  transform: rotateX(-90deg) translateZ(40px);
}
   
@-webkit-keyframes rotate {
  0% {
    transform: rotate3d(0, 0, 0, 0);
  }
  50% {
    transform: rotate3d(0, 1, 0, 180deg);
  }
  100% {
    transform: rotate3d(0, 1, 0, 360deg);
  }
}

<div class="main-cube-wrapper">
    <div class="wrap">
        <div class="cube">
            <div class="face-1"></div>
            <div class="face-2"></div>
            <div class="face-3"></div>
            <div class="face-4"></div>
            <div class="face-5"></div>
            <div class="face-6"></div>
        </div>
    </div>
</div>

​