1

我用 CSS3 做了一些实验。我想用只有 2 个 DIV 构建一个翻转立方体。像这样： http ://cssdeck.com/labs/css3-flipping-cube （我不喜欢这个解决方案，因为 div 必须始终居中）所以我试图找到我自己的解决方案。我的 HTML 结构如下所示：

<div class="outer">
  <div class="face face1">Click here !</div>
  <div class="face face2"></div>
</div>

我的 CSS 文件如下所示：

.outer { margin-left:52px; position:relative; width:400px; perspective:500px; }
.face { width:100%; height:50px; padding:0 10px; background-color:#E5E5E5; position:absolute; }
.face.face1 { height:50px; background-color:#E5E5E5; transform:rotateX(0deg); transform-origin:0 0 0; z-index:1; top:0; }
.face.face2 { height:50px; background-color:#007CC1; transform:rotateX(-90deg); transform-origin:0 50px 0; z-index:3; top:0; }
.face.face1.start { transform:rotateX(90deg); transition:transform 1s ease-out; }
.face.face2.start { transform:rotateX(0deg); transition:transform 1s ease-out; }

当我点击face1然后 javascript 添加类开始到 div 是动画。

$(function(){
    $('.outer').on('click', function(){
        $('.face1').addClass('start');
        $('.face2').addClass('start');
    });
});

我的解决方案目前看起来不太好。你对我有什么建议或想法吗？你可以在这里看到整个代码：

http://jsfiddle.net/dAXRX/3/

（我没有使用-webkit前缀。它目前仅适用于 Firefox）

4

0 回答 0