Question

我用CSS3做了一些实验。我想建立一个只有2个DIV的Flipping Cube。就像这样： 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）

CSS翻转多维数据集

0 个答案: