Rotate 3D

In SVG and a two-dimensional picture you have two axes, x and y. And from childhood, it is clear which way is which with cartesian coordinates. On the x axis you move horizontally, left and right. On the y axis you explore the perpendicular dimension, top and bottom.

If you want to rotate the shapes, there’s very little to argue past the place where the rotation takes place, the SVG origin.

Rotate the pin from the center, and the behavior is predictable. The toy turns like the hands of a clock. Positively clockwise.

In three dimensions, the picture becomes fuzzier. You can now rotate on different axes, x, y and z. And if you struggle on matching the letters to the actual rotation, you might have found the right article. It may seem counter-intuitive, but as you break down the concept with a few visuals, a few examples, there will be little left to wonder.

x, y, and z. The first two axes behave in much the same way as the 2D picture. Left and right, top and bottom. The z axis starts from the shared origin and aims right at you. It describes the depth of the picture by getting closer or further away. I might as well have drawn the axis in the 2D picture and you still wouldn’t have been able to see it. To show the additional line, alongside the other two axes, you need a different point of view.

Rotate the visual over two axes and you see all the possible values. Every dash, line and letter in every possible direction. But how do the rotations work?

It helps to look back at the lines. These represent the axes and give an immediate answer if you think about them as a hinge.

If you rotate relative to the x axis, the rotation takes place around the horizontal line, like a few treats turning on a skewer on a gentle flame.

Relative to the y axis, you turn around the vertical strait. Like a ballerina in a music box or a cockerel in a jolly weather vane.

Relative to the z axis, finally, you turn around the most direct line, and find the same exact behavior you had in the two-dimensional frame. You turn around the segment matching your eyesight and the pinwheel turns again like the hands of a clock. With a fresh new look.