5

私は CSS で Isometric 3D を実行しようとしています。ここに私が今持っているものがあります: http://jsfiddle.net/AagGZ/1/ (テスト用の webkit のみ)

私は基本的に、1px x 1px のボックス シャドウを使用して 3D 効果を作成しています。アニメーション化するとき、1px の新しいレイヤーを追加しようとしているので、アニメーションは失敗します (あまり良くありません)。

それを実装するより良い方法はありますか？CSS コンテンツの前後に CSS マトリックスを考え、div を追加しました。

これは、基本的な機能ではなく、私のプロジェクトへの素晴らしい追加であるはずなので、IE9 未満で動作しなくても問題ありません。

ご協力いただきありがとうございます。

編集：無地の背景が必要であるという事実は少し問題があるため、質問を再開しました。フィルターの前後に大きな「見えない」白い矢印が作成され、異なる背景に異なる背景があると非常に速く苦痛になりますサイトの一部、または別の要素にカーソルを合わせると背景を変更したい場合。とりあえず自分のバージョンに戻り、アニメーションを無効にします。どんなアイデアでも大歓迎です！

4

2 に答える 2

5

私のバージョンがあなたのバージョンよりもハッキーであるかどうかはわかりません。それでも、それは興味深い問題であり、私はそれを試してみました。

http://jsfiddle.net/duopixel/5fdcj/

私のバージョンでは、単純な境界線を追加し、境界線の形状を使用して傾斜したコーナーを作成しましたhttp://www.howtocreate.co.uk/tutorials/css/slopes。背景が単色でない場合、これは機能しません。

私には、最もクリーンな解決策は境界線の画像を使用することであるように思われます：http ://www.css3.info/preview/border-image/ 。

于 2011-02-28T05:35:41.930 に答える
2

了解しました。これは、Duopixelの前後のフィルターの使用に基づいていますが、実際には境界が前後のブロックにあるため、透明度に問題はありません。

： http： //jsfiddle.net/BXUdP/65/

私がそれを好きな理由：透明性に問題はなく、IE8で動作します。アニメーションは今のところFirefox4でのみ機能しますが、Chromeにはフィルターの前後でアニメーション化できないバグがあります。ただし、次のマイルストーンで修正が計画されているため、現時点では十分に正常に機能が低下します。

于 2011-03-06T17:09:59.313 に答える