Quaternions and 3d rotation, explained interactively

Quaternions matter because they provide a reliable, programmer-friendly way to represent 3D orientation—one that sidesteps the classic failure modes of Euler-angle rotations and avoids the numerical headaches that come with interpolating rotation matrices. In practice, that robustness shows up everywhere from computer graphics to robotics and virtual reality, and even in consumer hardware: software inside many phones uses quaternions to track how the device is oriented in space.

A common alternative starts with 3×3 rotation matrices and Euler angles, which describe a rotation by turning around three easy-to-understand axes. That approach works until it doesn’t. When two rotation axes line up, the system loses a degree of freedom in a phenomenon called gimbal lock. Euler angles also make interpolation between two orientations tricky, with ambiguities and edge cases that can produce inconsistent motion—especially noticeable in animation and control systems.

Quaternions avoid gimbal lock and offer a cleaner path for interpolation between orientations. They also reduce problems that arise when trying to blend rotation matrices, such as drift away from valid rotation properties and normalization issues. The practical payoff is smoother, more stable orientation handling across software systems that must update rotations repeatedly and accurately.

The core computational trick is that quaternion multiplication can encode 3D rotations in a way that mirrors how complex numbers encode 2D rotations. In 2D, a point like (4, 1) can be rotated by an angle θ by multiplying it by a unit complex number at angle θ—using only the rule i² = −1. The multiplication “just works,” producing the rotated coordinates.

In 3D, the quaternion construction follows the same spirit but with a higher-dimensional twist. To rotate by an angle around a specific axis, the axis is represented as a unit vector with components (i, j, k) whose squared components sum to 1. A quaternion is then built from the rotation angle: the real part uses cos(θ/2), while the imaginary part uses sin(θ/2) times the axis components. The appearance of θ/2 may seem arbitrary at first, but it’s essential for the algebra to match the geometry.

To apply the rotation to a 3D point, the method uses a “sandwich” product: multiply the point by the quaternion on the left and by the inverse of the quaternion on the right. With the quaternion multiplication rules for i, j, and k, expanding those products yields the rotated coordinates. The inverse on the right is what ensures the transformation behaves like a proper rotation rather than a general quaternion multiplication.

The next step is to visualize and unpack what those two quaternion multiplications are doing geometrically—why the half-angle appears, and why the inverse sits on the right. An explorable tutorial hosted at eater.net slash quaternions is positioned as the hands-on way to see the rotation computation in action.