透视不适用于 "to" 过渡，但适用于 Safari 中的 "back" 过渡

Question

我在 Safari 中发现了 perspective 这种相当奇怪的行为。在 transform: rotateY(180deg) 上使用 perspective 时，to 旋转没有应用透视，但 back 旋转有。请参阅下面的两个 gif：

Safari 上的行为。第一轮没有任何透视：

与所有旋转都应用透视的 Firefox 相比：

The videos as an imgur album in case of problems with the gifs

我正在使用这段SCSS代码：

.card {
    perspective: 150rem;
    -moz-perspective: 150rem;

    &__side {
        background-color: orangered;
        color: white;
        font-size: 2rem;
        height: 50rem;
        transition: all .4s;        
    }

    &:hover &__side {
        transform: rotateY(180deg);
    }
}

我已经尝试了很多细微的改变，比如使用 -webkit-perspective，但没有成功。

这是包含代码的代码笔：https://codepen.io/YellowTech/pen/rNmXemj

我是不是忽略了什么或者如何解决这个问题？

谢谢！

Answer 1

动画试图转换为 180 度的旋转，但在 Safari 上它似乎想知道它是从什么开始转换的。也许其他浏览器假定初始旋转为 0 度。

如果设置了初始条件，我可以看到实际效果：

.cont {
  width: 300px;
}

.card {
    perspective: 150rem;
    -moz-perspective: 150rem;

    &__side {
        background-color: orangered;
        color: white;
        font-size: 2rem;
        height: 50rem;
        transition: all .4s; 
        transform: rotateY(0deg); /* ADDED */       
    }

    &:hover &__side {
        transform: rotateY(180deg);
    }
}