これを純粋なcssで再構築しようとしています。そして、私はここまで来ました。しかし、フラッシュ バージョンからわかるように、カバーが表示されると、他の div がホバーしている div のためのスペースを作るという考え方です。
自動で幅を設定しようとしましたが、その特定の div で遷移プロパティを設定しましたが、うまくいきませんでした。また、ホバーする前にdivの幅を0に設定し、ホバー時に300pxに設定しようとしましたが、これでうまくいきましたが、実際にはアニメーション化されませんでした..
それは単純なものかもしれませんし、そうでないかもしれませんが、どちらの方法でも正しい方向にプッシュするのは素晴らしいことです!
ありがとう。
単純な 3D 変換でこれを行うことができる WebGL ブラウザは必要ありません。
トランスフォームは再レイアウトを明示的にトリガーしないため、カーソルを合わせたときに div の幅を明示的に変更する必要があります。本の内容を絶対に配置する必要があります。
ホバー幅の変更にはラッパー div を使用し、変換には子 div を使用する必要があります。
ネスティングは健全性を変換するための鍵です。
これが実際の動作を示す jsfiddle です: http://jsfiddle.net/ZMqze/4/
アンホバーにはもう少し洗練が必要です。
最初に、ハードウェア アクセラレーションをサポートする webgl ブラウザが必要です (これは、windowsxp では safari5 のみです。Linux では webkitnightly custombuild - または win7)。
後でもう少し時間があれば、正確な css を提供しようと思いますが、これらの手順で目的の結果が得られるはずです。