Adding depth to a 2D rotated element

Problem

In essence, I need to have my div transformed to position itself like the top side of this box (ignoring the radius border, logo, gradient, etc.)

In order to do so, I need to

  1. Rotate the element to the proper angle, which I know how to do using transform:rotate(45deg). Example here. The problem with this is that there is no depth, it just looks like a rotated square because that's what it is. I want it to look like a plane that something could be set on
  2. Add the perception of depth on the element, which I also know how to do using Craig Buckler's approach. Example here
  3. Combine the two effects on the element at the same time. This is the part that I cannot seem to get correct

My basic code

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

I thought I could get the effect I'm looking for by simply combining the two, using

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

but I found it was not so. Example here. The problem with this one is that it still does the rotateX based on the original orientation of the element, not the rotated version. Thus, it does not have the proper effect

I thought I could make it take the rotated angle of 45deg into consideration for the rotateX if I applied the rotate(45deg) to a container element, but this was also to no avail. Example here

I have tried variations of these approaches but (of course) have yet to get the effect I'm looking for

Do you have any idea how I can properly achieve this effect?

Problem courtesy of: Zach Saucier

Solution

The correct transform is

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

You want the plane where the element is to be always facing you, so first of all you rotate in X. This sets a plane that at the bottom is near you and at the top is far from you, and you don't want this plane to rotate, so you can't place a rotation before it.

Once you have set this plane, then, inside it, you rotate the div.

Maybe this fiddle makes it more clear, hover the div to see the rotation plane.

Solution courtesy of: vals

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.