Below is the same 3d object created directly with CSS, in slightly different perspective.

123
123
123
123

Now add 45 degree rotation around y axis

123
123
123
123

Ok, that's the same anomaly as seen in impress.js. Just like in VPython, order matters. Below we've added rotateY first, not last:

123
123
123
123

Instead of rotating 45 around y, rotate around z-axis:

123
123
123
123

Same effect, 2 out of 4 planes don't rotate correctly. But again, if we add the rotateZ() first, not last, it's correct:

123
123
123
123

So what did we learn? The anomaly is not an impress.js bug, rather this is how rotations in 3d space work. Order matters, both in CSS and in VPython. In practice, it seems one should define "common" transformations (the 45 deg) first, and object specific transformations last. Once an object deviates from the common rotation, it lives in its own relative universe after that.

Impress.js will always apply rotations in the same order: z, y, x. While this is not a bug, it is a limitation. In particular, it turns out if you apply rotateY(90deg), then the rotation around x-axis after that is exactly the same as rotating around z-axis before that. Here is the xy-plane rotated rotateX(90) and rotateY(90):

123

And here is the same with rotateY(90) rotateZ(90):

123

That is also why (rotateZ(90) rotateY(90) rotateX(90)) is the same as just rotateY(90). The X and Z cancel each other out!

This means with impress.js 3D model, with rotateY(90) you lose 1 dimension. Certain rotations aren't possible! The following is not possible in impress.js...

RotateY(-90deg):

123

RotateX(45deg) RotateY(-90deg):

123