Door opening 3D effect in CSS

Question

I'm trying to create a "door opening" 3D effect in CSS but I just can't do it. The problem is that using rotateY() function makes the element spin. You can check it here http://jsfiddle.net/uC4du/1/

Do you know how to change the rotateY "reference axis"? What should I do to make the element rotate using its left corners as reference?

Answer 1

You can use 'transform-origin' property ( http://www.w3schools.com/cssref/css3_pr_transform-origin.asp ).

Set it to something like: "-webkit-transform-origin: 0% 50%;"

Here is your example using that property: http://jsfiddle.net/aV76H/

Hope it helps!