CSS3 rotateY transition not correctly rotating about y-axis


I have the following code: http://jsfiddle.net/RFMxG/1/

When the transition runs, you can see a padding of about 20-30 pixels on the left hand side. Despite the fact I have set the transform-origin to be 0,0,0, it is still not correctly rotating about the y-axis. The left edge of the blue box should be flush against the left hand edge at all times during the animation.

Can anyone tell me what I've done incorrectly?

Problem courtesy of: romiem


Right, so the solution was actually due to the fact the transform origin needs to be set prior to the animation starting (it cannot be set at the same time the -webkit-transform property is set).

I've updated the fiddle to demonstrate this now works correctly. http://jsfiddle.net/RFMxG/5/

Solution courtesy of: romiem


Okay, there are whole bunch of issues here:

1) CSS transforms aren't animatable using transitions. If you look at the W3C list of transitionable properties, you'll notice that transform isn't there.

2) -webkit-perspective only affects the children of the element it is applied to, not the element itself. Read the Safari blog on this:

The interesting thing about -webkit-perspective is that it does not affect the element directly. Instead, it affects the appearance of the 3D transforms on the transformed descendants of that element; you can think of it as adding a transform that gets multiplied into the descendant transforms. This allows those descendants to all share the same perspective as they move around.

3) It's awesome that you posted a fiddle, but since this is a CSS problem, for future reference it would have been a lot easier if you cleaned out all the javascript, and used one set of browser prefixes only. Help us help you!

4) What you probably want to use is an animation. Here's a highly modified version of your fiddle that works on hover:


5) If javascript is your skill set, and you're at all concerned about browser compatibility (which of course you are!), I highly recommend doing these kinds of animations with jstween.

Discussion courtesy of: Ben

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