为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 让它更清晰，将div悬停在旋转平面上。