Perspective 不处理“to”转换，而是处理 Safari 中的“back”转换

Question

我在 Safari 中发现了 perspective 的这种相当奇怪的行为。在transform: rotateY(180deg) 上使用perspective 时，to 旋转没有应用透视，但反向旋转可以。请参阅下面的两个 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);
    }
}