css - CSS卡翻转效果略有不同

Question

小提琴

基本上，我不只是基本rotateY(180deg)方法，而是尝试将它与translateX变换结合起来，使卡片看起来像是实际上是从右侧（翻转时为左侧）拿起然后放回“桌子上“在它的新方向。

正如您在 Fiddle 中看到的，它具有正确的一般运动，但由于某种原因，两张脸不同步。我不确定我做错了什么 - 我想我只是没有在空间几何上被烧毁 XD

任何帮助整理此动画将不胜感激！

Answer 1

我认为这就是你想要的：

更新的小提琴

诀窍是背景需要另一个变换原点：

#tcb {
    background:#030;
    transform:translateX(-100%) rotateY(180deg);
    -webkit-transform:translateX(-100%) rotateY(180deg);
    z-index:0;
    transform-origin:100% 50%;
    -webkit-transform-origin:100% 50%;
}

原因是旋转的角度是相反的，所以你需要围绕另一个边框翻转它。（因此，原点为 100%）。现在你已经改变了，你需要重新调整偏移量（translateX 值）

我还需要将前景的变换原点从 div（它同时设置为前景和背景）移动到前景 div。