5

マイクロソフトは彼らのウェブサイトで言います

注 W3C 仕様では、このプロパティのキーワード値 preserve-3d が定義されています。これは、平坦化が実行されないことを示します。現時点では、Internet Explorer 10 は preserve-3d キーワードをサポートしていません。これを回避するには、子要素の通常の変換に加えて、親要素の変換を各子要素に手動で適用します。

誰かがこれをどのように適用すべきかの例を挙げてもらえますか?

4

2 に答える 2

2

で 3D オブジェクトを作成するには、コンテナ div から変換を削除するtransform-style: flat必要があります。

.object3d {
  transform-style: preserve-3d; // remove to get the flat behavior in all browers
  transform: translateX(80px) rotateY(-35deg); // cut the container transforms.
}

次に、html 構造を平坦化する必要がある場合があります。そのため、変換を含むdiv は、変換を含む div 内にはありません。

そして、相対的な変換の前に、すべての面に変換操作 (コンテナ div にあったもの) を貼り付けます。

前：

.object3d__bottom { 
  transform: translateY(50px) rotateX(90deg);
}

後：

.object3d__bottom { 
  transform: translateX(80px) rotateY(-35deg) translateY(50px) rotateX(90deg);
}

デモ: http://jsbin.com/ICuVihi/17/

于 2014-02-01T02:17:58.730 に答える