How to set webkit-transform-origin to roll 3D cube on its edges?

Question

I am fiddling around with CSS3 perspectives & transformations. Starting from this great 3D cube example, I would like to modify the cube such that it does not just rotate around its center, but roll over its edges.

I got the first left tilt working by rotating the cube around the z-axis, with -webkit-transform-origin: bottom left (see fiddle; example limited to left tilts for simplicity). For a subsequent left tilt, I am struggling how to further adjust the origin. Conceptually, I would need to set the origin relative to the parent container (i.e. for consecutive left tilts, it should gradually wander to the left in 200px steps).

Any help is greatly appreciated!

Answer 1

I've had a go at this and I think you'll need to look into the css matrix transformations available to you to get exactly what you want.

Unfortunately it's not as simple as rotate, then move transform origin. What happens is the cube is rotated around that edge, but then if you move the point of transform it applies the previous transform to the cube using this new point of origin.

What's more you need to also translate the position of the cube. You can't move it along purely using rotations. Matrices should solve all of this I think (I don't know an awful lot about them I'm afraid)

You can see the modified jsfiddle I created where the cube is rotated and translated. The point of translation is the center though, so it doesn't look like the cube is "rolling". here's the crucial extra code:

...

//left
zAngle -= 90;
xPos -= 50;
//rotate and translate the position of the cube
$('#cube')[0].style["WebkitTransform"]="translateX("+xPos+"px) rotateZ("+zAngle+"deg)";

...

js Fiddle here: http://jsfiddle.net/DigitalBiscuits/evYYm/20/

Hope this helps you!