CSS卡片翻转效果略有不同

Question

Fiddle

基本上，我不只是基本的rotateY(180deg)方法，而是尝试将其与translateX变换相结合，使卡片看起来像是从右侧(向后翻转时为左侧(拾取的，然后以新的方向放回"桌子"上。

正如你在Fiddle中看到的，它有正确的总体运动，但由于某种原因，两个面不同步。我不确定我做错了什么——我想我只是不是空间几何的XD

如果能帮忙整理这部动画，我们将不胜感激！

Answer 1

我认为这就是您想要的：

更新的fiddle

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

#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。