css - CSS3 変換: 親がrotateYを持つ場合の子の補正

Question

まずはこちらをご覧ください

div#container が "x" 度回転 Y の場合、その<ul>中の and および 要素も同様に回転します。しかし、私はすべての<img>内部をそれぞれ<li>平らに向けたいと思っています。<li>「-x」度だけ Y を回転させても、うまくいきません。

回転した div#container に沿って配置しながら、すべての画像を自分に向けて平らにする方法はありますか? ありがとう。

Answer 1

親にはすでにこれらのプロパティが定義されているため、プロパティ-webkit-perspectiveとwebkit-transform-styleinは必要ありません。ul#looks

また、これらのパースペクティブと変換プロパティをから削除し、ul#looks liこれを追加します。

ul#looks li {
    -webkit-transform: rotateY(-10deg);
}

jsfiddleデモはこちら

削除する必要があるものをコメントアウトしたことがわかります。