Rotating a cube about an axis through opposite vertices

2.5k Views Asked by At

I have a cube made using CSS transforms that I'm trying to animate rotating about an axis going through 2 opposite vertices.

What I have:

Initial cube:

   /* Animation start */
   rotateX(0deg) rotateY(0deg) rotateZ(0deg);
   /* Animation end */
   rotateX(0deg) rotateY(0deg) rotateZ(0deg);

https://i.stack.imgur.com/pJnXZ.gif

Rotated cube:

   /* Animation start */
   rotateX(-45deg) rotateY(45deg) rotateZ(0deg);
   /* Animation end */
   rotateX(-45deg) rotateY(45deg) rotateZ(0deg);

https://i.stack.imgur.com/csYFP.gif

Rotating X:

   /* Animation start */
   rotateX(-45deg) rotateY(45deg) rotateZ(0deg);
   /* Animation end */
   rotateX(315deg) rotateY(45deg) rotateZ(0deg);

https://i.stack.imgur.com/a4ZVh.gif

Rotating Y:

   /* Animation start */
   rotateX(-45deg) rotateY(45deg) rotateZ(0deg);
   /* Animation end */
   rotateX(-45deg) rotateY(405deg) rotateZ(0deg);

https://i.stack.imgur.com/W40DN.gif

Rotating Z:

   /* Animation start */
   rotateX(-45deg) rotateY(45deg) rotateZ(0deg);
   /* Animation end */
   rotateX(-45deg) rotateY(45deg) rotateZ(360deg);

https://i.stack.imgur.com/7RMWm.gif

What I want:

https://i.stack.imgur.com/jQN3Y.gif

I'm not a programmer or a mathematician, and I've tried looking this up on Wikipedia and through past answers, but both get into some heavy matrix-transformation stuff and technical jargon that goes over my head. I'm just trying to figure out the right numbers to plug in for the X, Y, and Z axes to achieve a "sideways" rotation.

Thanks for any help!

Edit: I just noticed this, but I think CSS3's rotateX isn't behaving the way it should. Both rotateY and rotateZ act relative to the object - using its axes for rotations even when those axes have been rotated - but rotateX seems to always rotate relative to the viewport, no matter how much I try to stop it from doing that! This is evident even in the above pictures - rotateY and rotateZ both rotate the cube along one of its own axes, but rotateX instead rotates the whole cube along the viewport's X axis. I think this might be an implementation bug; feel free to correct me if I'm wrong.