-webkit-transform: вращать - скрывает элементы сверху

Question

Я использую -webkit-transform: rotate(40 deg), и кажется, что вращающийся элемент скрывает части элементов, которые находятся сверху (, а не дети) повернутого.

Я создал jsFiddle here с кодом, так как это будет проще продемонстрировать.

Возможно, это связано с тем, что вращающийся элемент скрывает части других элементов, но я не хочу этого эффекта. Как я могу это исправить?

Я использовал z-index, но это не поможет!

Answer 1

Вы делаете 3D-преобразование. У вас есть «rotateY» в скрипке, а не «вращать». Итак, вы перемещаете часть самолета перед кнопками. Проверьте для себя, изменив код для второй кнопки для

$("div.buttonB").click(function() { 
    $("div.background").css('-webkit-transform', 'rotateY(-190deg)') 
}); 

Этот путь после нажатия buttonB, buttonB будет кликабельна но buttonA не будет. Теперь измените значение -190deg на 190deg, и вы увидите, что он работает наоборот.

Если вы хотите обернуть голову вокруг 3D-преобразований, ознакомьтесь с этим сайтом.

http://thewebrocks.com/demos/3D-css-tester/

Смотреть видео и играть с контролем. Надеюсь это поможет.