Below is the same 3d object created directly with CSS, in slightly different perspective.
Now add 45 degree rotation around y axis
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:
Instead of rotating 45 around y, rotate around z-axis:
Same effect, 2 out of 4 planes don't rotate correctly. But again, if we add the rotateZ() first, not last, it's correct:
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):
And here is the same with rotateY(90) rotateZ(90):
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...