Css 向二维旋转图元添加深度

本质上，我需要将我的

div

转换为类似于此框顶部的位置（忽略半径边框、徽标、渐变等）

为了做到这一点，我需要

将元素旋转到适当的角度，我知道如何使用

变换：旋转（45度）

。问题是没有深度，它看起来就像一个旋转的正方形，因为它就是这样。我希望它看起来像一架飞机，可以装上什么东西

在元素上添加深度感知，我也知道如何使用

同时在元素上组合这两种效果。这是我似乎无法正确理解的部分

我的基本代码

/* 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;
}

但我发现事实并非如此。这一个的问题是，它仍然基于元素的原始方向执行

rotateX

，而不是旋转版本。因此，它没有适当的效果

我想如果我将

rotate（45deg）

应用于容器元素，我可以将

45deg

的旋转角度考虑到

rotateX

，但这也是徒劳的

我已经尝试过这些方法的各种变体，但是（当然）还没有达到我想要的效果

---

你知道我怎样才能达到这个效果吗？

正确的变换是

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

您希望元素所在的平面始终面向您，因此首先在X方向旋转。这将设置一个底部靠近您、顶部远离您的平面，并且您不希望该平面旋转，因此您不能在其前面放置旋转

设置此平面后，在其内部旋转div

---

也许这更清楚，将div悬停以查看旋转平面。

您还可以解释为什么会这样吗？知道如何使伪元素看起来像什么吗？我需要沿Z方向平移，但当我不想平移时，它会不断缩放（不用担心颜色，我知道如何做到这一点，这要归功于你的背景技巧）。坏消息是，你需要保留-3d才能使Z变换工作；看起来任何浏览器都支持伪元素。我已经在2d中重做了一切：我明白了。我将尝试使用此方法来实现我的原始意图，并向您介绍它的运行情况。再次感谢你的帮助！如果您真的想在3D中完成，那么应该使用单独（和嵌套）的div来完成。（每个面3个div）。祝你好运

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