3D CSS door opener effect

Question

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

Do you know how to change the rotateY reference axis? What to do to make the element rotate using the left corners as a link?

Answer 1

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

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

, : http://jsfiddle.net/aV76H/

, !