CODEWITHSUNDEEP
csstransformation
Jonas
Jonas

Reputation: 588

How to rotate and translate a css 3d cube?

I am trying to rotate a cube, more specifically the one from this tut: http://desandro.github.com/3dtransforms/examples/cube-02-show-sides.html Say I want to go from side 1 to side 3. Now, what I would like to achieve is to not only rotate the cube but also translate it (move it) on the x-axis. For example, the cube would move 20px to the right (until half the rotation) and then 20px left (back to its original position) when the rotation is over. I tried the following but I guess there's something wrong with it (I am omitting the css prefixes here ):

#cube.show-right {
    transform: translateX(20px) translateZ( -100px ) rotateY(  -90deg ) translateX(-20px)
}

Any idea how to perform this? Thanks!

Upvotes: 0

Views: 881

Answers (1)

lowe0292
lowe0292

Reputation: 904

I believe in your example the x-translations are canceling each other out (you're telling the cube to move to the right 20px and to the left 20px).

In order to accomplish what you're going for (slide right during first half of the rotation, slide left during the second half), I would put the cube inside a wrapper div with two translate animations, the second one delayed (see here for an explanation on how to delay transitions). These two animations should both be half the duration of the cube rotation.

Hope this helps!

Upvotes: 1

Related Questions