html - 2个盒子之间的CSS 3假3D立方体旋转

Question

我已经使用 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://tympanus.net/Development/CreativeLinkEffects/#cl-effect-19我想重现相同的转换，但我不明白它是如何工作的，或者更好的是我理解它利用伪选择器来“注入(inject)数据”，但我不明白如何重构我拥有 2 div 在它们之间切换而不是那样。怎么办？

更新:

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

Answer 1

更新:这是公认的答案。我的第一个答案包括错误类型的动画，因为我使用了 rotate-3d 属性，它在 IE 中不起作用。作为引用，我的第一个答案留在接受的答案下面。

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

DEMO

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