略有不同的CSS卡翻转效果

Question

Fiddle

基本上，我不是只使用基本的rotateY(180deg)方法，而是尝试将其与translateX转换相结合，以便卡片看起来实际上是从右侧拾取（左侧时向后翻转，然后以新的方向躺在“桌子”上。

正如你在小提琴中看到的那样，它具有正确的一般动作，但由于某种原因，这两个面不同步。我不确定我做错了什么 - 我想我只是没有空间几何上的XD

任何帮助整理这个动画的人都会非常感激！

Answer 1

我认为这就是你想要的：

updated 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）移动到前景div。