can i obtain this shape with css transform?

Question

imagine starting with a 500px square div, i want to achieve this result:

i tried transform: skew but it looks like it skews the div only on one side, but i want to obtain this perspective look as if this div is coming right at you

here's a fiddle for some testing: http://jsfiddle.net/kf6oow6f/

any suggestions? thank you

Answer 1

body{
    perspective: 50em;
}
div {
    width: 500px;
    height: 500px;
    background:black;
    transform:rotateX(60deg);
    margin:100px auto;
}

Demo: http://jsfiddle.net/kf6oow6f/2/

---

The perspective property should be on the parent of the div, which is body in this demo. The value 50em can be adjusted as needed.

Note also that (unlike a previous answer), using this transform allows you to insert content that is also identically distorted. Demo: http://jsfiddle.net/kf6oow6f/3/