You'll have to fiddle with rotating along all 3 axes, and skewing. Here's an example:
div {
perspective: 200px;
width: 150px;
position: relative;
color: white;
line-height: 2.4;
text-align: center;
padding-left: 20px;
}
div::before {
content: '';
z-index: -1;
position: absolute;
background: #7fc552;
top: 0; right: 0; bottom: 0; left: 0;
transform: skew(-9deg) rotateX(-22deg) rotateY(-21deg) rotateZ(-9deg);
/* Firefox seems to render this with pretty bad jagged edges.
Add a transparent outline to fix that. */
outline: 1px solid transparent;
}
Here's a live demo: http://codepen.io/JosephSilber/pen/Jvohk/