0

CSS3変換を使用して回転している4つのdivで構成された立方体（ほぼ）があります（これはChrome拡張用であるため、現在-webkitに制限されています）。

ただし、http://jsfiddle.net/CxYTg/にアクセスして「1」、「2」、「3」、「4」をクリックし、もう一度「1」をクリックすると、最後のローテーションが表示されます。逆方向に回して元の向きに戻します。

CSS3 を使用してこれを修正する方法はありますか? 次のような方法があるかどうか疑問に思っています。

#environment li.rota180:first-of-type .cubeface { -webkit-transform: rotateY( "by 90deg") translate3d(0, 0, 100px); }

(はい、JavaScript を使用してこれを実行できることは知っていますが、CSS のみで実行できるかどうかを知りたいです。)

4

1 に答える 1

0

純粋なcssでそれを行う方法はありません。
これを希望どおりに実装するには、変数と条件が必要です。javascript を使用すると簡単です。
必要なことは、度数用と現在のボックスを記憶するための 2 つの変数を作成することだけです。残りは単なる条件です。

于 2012-02-14T18:16:12.563 に答える