CSS 3假3D立方体在2个盒子之间旋转

我使用 css 实现了翻转旋转：

.flip-card {
    position: relative;
    z-index: 1;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -o-perspective: 1000px;
    perspective: 1000px;
}

.flip-card-content {
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transform-style: preserve-3d;
    -moz-transition: all 0.5s ease-in-out;
    -o-transform-style: preserve-3d;
    -o-transition: all 0.5s ease-in-out;
    transform-style: preserve-3d;
    transition: all 0.5s ease-in-out;
}

.flip-card.flip-x.flipped .flip-card-content,
.flip-card.flip-x .flip-card-side.flip-card-back {
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    -o-transform: rotateX(180deg);
    transform: rotateX(180deg);
}

.flip-card.flip-x-inverse.flipped .flip-card-content,
.flip-card.flip-x-inverse .flip-card-side.flip-card-back {
    -webkit-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    -o-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
}

.flip-card.flip-y.flipped .flip-card-content,
.flip-card.flip-y .flip-card-side.flip-card-back {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.flip-card.flip-y-inverse.flipped .flip-card-content,
.flip-card.flip-y-inverse .flip-card-side.flip-card-back {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.flip-card-side {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

您可以在此处查看示例：http://jsfiddle.net/jckMg/ http://jsfiddle.net/jckMg/

但是，现在我看到了这个惊人的效果：http://tympanus.net/Development/CreativeLinkEffects/#cl-effect-19 http://tympanus.net/Development/CreativeLinkEffects/#cl-effect-19我想重现相同的转换，但我不明白它是如何工作的，或者更好的是我理解它使用伪选择器来“注入数据”，但我不明白如何重构我的想法 2 divs 在它们之间切换而不是那样。 怎么办呢？

UPDATE:

最后的实验实现是这样的：http://jsfiddle.net/w7y4N/ http://jsfiddle.net/w7y4N/它只能在 Firefox 中完美运行（在 Chrome 和 Safari 中它有问题）……你能将其修复为跨浏览器吗？

UPDATE:这是已接受的答案。我的第一个答案包括错误的动画类型，因为我使用了rotate-3d属性，它在 IE 中不起作用。作为参考，我的第一个答案位于已接受的答案下方。

由于IE不支持preserve-3d，我修改了代码以分别旋转每一侧，但对于只有两个div的情况来说，这没什么大不了的，而且代码非常干净。在 Windows 上的 Chrome 31、FF26、O18 和 IE10 中进行了测试。在 IE9 中，它只是翻转内容，没有进行很酷的过渡，但仍然有效。为了获得更多遗留支持，我可能只会使用现代化的类切换侧面可见性。

DEMO http://codepen.io/teodragovic/pen/HfCnI

HTML

<div class="flip-card-content">
  <div class="flip-card-side-a" style="background:red">
    FRONT 
  </div>
  <div class="flip-card-side-b" style="background:green">
    BACK
  </div>
</div>

<button id="button">Flip</button>

CSS（使用 SCSS，为简洁起见省略了供应商前缀）

.flip-card-content {
    position: relative;
    margin: 100px;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.flip-card-side-a,
.flip-card-side-b {
    width: 100%;
    position: absolute;
    height: 100%;
    backface-visibility: hidden;
    transform-origin: 50% 50%;
    transition: all .5s ease-in-out;
}

.flip-card-side-a {
  transform: rotateY(0deg) translateZ(100px);
  z-index: 1; // fixes buggy behavior in FF and Opera
}
.flip-card-side-b {
  transform: rotateY(90deg) translateZ(100px);
}

.flip .flip-card-side-a {
  transform: rotateY(-90deg) translateZ(100px);
}
.flip .flip-card-side-b {
  transform: rotateY(0deg) translateZ(100px);
  z-index: 1;
}

默认情况下，CSS 围绕其中心旋转对象，您可以通过设置来更改它transform-origin属性为某个值（在本例中为顶部和中心）。由于我们更改了变换的原点，将 div 旋转 180 度会将其置于红色 div 之上，因此我们必须旋转 270 度以将其水平放置在平面上，从而不可见。我们通过点击或其他方式将旋转设置回 0deg 来获得很酷的翻转效果。

DEMO http://jsfiddle.net/jckMg/25/