css - CSSフリッピングキューブ

Question

CSS3で実験をしました。DIVが2つしかないフリッピングキューブを作成したかったのですが、次のようになります： 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でのみ機能します）