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);

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

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

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

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

What I want:

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.