css - 为 2D 旋转元素添加深度

Question

本质上，我需要将我的 div 转换为像此框的顶部一样定位自己(忽略半径边框、 Logo 、渐变等)

为了做到这一点，我需要

1. 将元素旋转到适当的 Angular ，我知道如何使用 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。因此，它没有达到应有的效果

我想如果我将rotate(45deg)应用到rotateX，我可以让它考虑45deg的旋转 Angular 容器元素，但这也无济于事。 Example here

我尝试过这些方法的变体，但(当然)尚未达到我想要的效果

你知道我如何才能正确实现这种效果吗？

Answer 1

正确的变换是

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

您希望元素所在的平面始终面向您，因此首先您在 X 轴上旋转。这会设置一个底部靠近您而顶部远离您的平面，而您不这样做不希望该平面旋转，因此您不能在其之前放置旋转。

一旦设置了这个平面，就可以在其内部旋转 div。

也许这个 fiddle 更清楚了，将鼠标悬停在 div 上即可查看旋转平面。