Добавление глубины в 2D вращают элемент

Question

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

для того, чтобы сделать это, мне нужно

1. Поверните элемент на нужный угол, который я знаю, как это сделать с помощью transform:rotate(45deg). Example here. Проблема в том, что нет глубины, она просто выглядит как вращающийся квадрат, потому что это то, что есть. Я хочу, чтобы это выглядело как самолет, что-то можно было бы установить на
2. Добавить восприятие глубины на элемент, который я также знаю, как сделать, используя Craig Buckler's approach. Example here
3. Объединение двух эффектов на элемент в то же время. Это та часть, что я не могу показаться, чтобы получить правильный

Мой основной код

/* HTML */ 
<div id='square'></div> 

/* CSS (without any transforms) */ 
#square { 
    width:150px; 
    height:150px; 
    background:black; 
    position:absolute; 
    top:50%; left:50%; 
    margin-left:-75px; 
    margin-top:-75px; 
} 

Я думал, что я мог бы получить эффект я ищу, просто комбинируя два, используя

transform: rotate(45deg) perspective(300px) rotateX(25deg); 

но я нашел, что это было не так. Example here. Проблема с этим заключается в том, что он все еще делает rotateX на основе исходной ориентации элемента, а не с повернутой версией. Таким образом, он не имеет должного эффекта

Я думал, что я мог сделать это взять повернутый угол 45deg во внимание при rotateX если я применил rotate(45deg) к элементу контейнера, но это также не дало никаких результатов. Example here

я попытался вариации этих подходов, но (конечно) еще, чтобы получить эффект Я ищу

У вас есть какие-либо идеи, как я могу правильно достичь этого эффекта?

Answer 1

Правильное преобразование

perspective(300px) rotateX(25deg) rotate(45deg); 

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

Как только вы установили эту плоскость, то внутри нее вы поворачиваете div.

Возможно, это fiddle делает его более понятным, наведите указатель мыши, чтобы увидеть плоскость вращения.