transform: rotateY(0deg) rotateX(0deg);
You're looking at a cube. Scroll around a bit. transform: rotateX(0deg) rotateY(0deg) translateZ(120px);
The cube is made of 6 div elements.

They are positioned in 3d space using CSS transform: rotateX, rotateY, and translateZ
transform: rotateX(-90deg) rotateY(0deg) translateZ(120px);
It rotates by using JavaScript to update transform: rotateX() and rotateY() on the parent element. transform: rotateX(-180deg) rotateY(0deg) translateZ(120px);
Hover over a side to reveal its specific transform property. transform: rotateX(90deg) rotateY(0deg) translateZ(120px);
Isn't it odd that scrolling left-right feels natural...

...while scrolling up-down seems to be tied to an axis?

(see reverse side)
transform: rotateX(0deg) rotateY(270deg) translateZ(120px);
The order of rotateX() and rotateY() determines which axis is dominant. It works like a gimbal, where the first one is the outer axis, and the second is the inner axis.

(see reverse side)

to change the order, and see what I mean :)
transform: rotateX(0deg) rotateY(90deg) translateZ(120px);