Geek Answers Handbook

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

I messed around with CSS3 perspectives and transformations. Starting with this great example of a 3D cube , I would like to change the cube so that it does not just rotate around its center, but scrolls around its edges.

I got the first left slope by rotating the cube around the z axis, -webkit-transform-origin: bottom left ( see fiddle ; example limited left slopes for simplicity). For the subsequent left tilt, I struggle to further tune the source. In theory, I would need to set the origin relative to the parent container (i.e., for successive left tilts, it should gradually wander to the left with a step of 200 pixels).

Any help is much appreciated!

+6
source share
2 answers

I did it, and I think you will need to look at the css matrix transformations available to you to get exactly what you want.

Unfortunately, this is not as easy as turning and then moving the origin. It happens that the cube rotates around this edge, but then if you move the transformation point, it will apply the previous transformation to the cube using this new origin.

What else is needed to translate the position of the cube. You cannot move it using pure rotation. Matrices should solve all this, I think (I don’t know, there’s an awful lot about them, I’m afraid)

You can see the modified jsfiddle that I created, where the cube is rotated and translated. The transfer point is the center, so it looks like the cube is “rolling”. here is the critical additional 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 Script here: http://jsfiddle.net/DigitalBiscuits/evYYm/20/

Hope this helps you!

+1
source

I think this tutorial can help you.

http://desandro.imtqy.com/3dtransforms/docs/cube.html

If you want to flip its edges, just rotate Z and translate X. but how fast you want to rotate, you may have to pay for it.

http://desandro.imtqy.com/3dtransforms/examples/cube-02-show-sides.html

0
source

More articles:


All Articles