CSS3 трансформация: компенсация для детей, если родитель имеет rotateY

Question

Посмотрите здесь сначала

Когда контейнер div# поворачивается на "х", <ul> и и элементы внутри него также будут вращаться. Но я хочу, чтобы все <img> внутри каждого <li> смотреть в лицо Если я поверну Y все <li> "-x" градус не сработает.

Есть ли способ достичь и сделать все изображения плоскими, обращенными к вам, при этом располагаясь вдоль повернутого контейнера div#? Благодарю.

Answer 1

Вам не нужны свойства -webkit-perspective а также webkit-transform-style в ul#looks, поскольку родительский объект уже имеет эти свойства определены.

Кроме того, удалите эти перспективы и преобразуйте свойства из ul#looks li и добавьте это:

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

JSFIDDLE демо здесь

Вы можете видеть, что я закомментировал материал, который нужно удалить.