3D Rotation Visualizer

BetaThis tool is in beta. Some features may change or have limited functionality.
Share on XShare on FacebookShare on LinkedInShare on Reddit

Visualize and convert between Euler angles, quaternions, rotation matrices, and axis-angle representations in real time. Detect gimbal lock, explore rotation orders, and copy rotations in Unity, Unreal, glTF, and CSS formats.
x
y
z
w
x
y
z
1.00000.00000.0000
0.00001.00000.0000
0.00000.00001.0000
Axis(1.0000, 0.0000, 0.0000)
Angle0.00 deg
Loading 3D scene...

Click and drag to orbit. Scroll to zoom. Right-click to pan.

Understanding 3D Rotations: Euler Angles, Quaternions, and Rotation Matrices

Representing rotation in three-dimensional space is fundamental to computer graphics, game development, robotics, and aerospace engineering. There are several mathematically equivalent ways to describe a 3D rotation, each with distinct advantages and trade-offs.

Euler Angles

Euler angles describe a rotation as three sequential rotations around coordinate axes. You specify angles for pitch (X), yaw (Y), and roll (Z). They are intuitive and easy to edit, but they suffer from gimbal lock — a singularity that occurs when two rotation axes align, causing a loss of one rotational degree of freedom.

Quaternions

A quaternion is a four-component number (w, x, y, z) that represents rotation without gimbal lock. Quaternions are compact, numerically stable, and ideal for smooth interpolation via SLERP (Spherical Linear Interpolation). Most game engines — Unity, Unreal, Godot — use quaternions as their internal rotation representation.

Rotation Matrices

A 3x3 rotation matrix provides the most explicit representation. Each column describes where the corresponding basis vector (X, Y, Z) ends up after the rotation. Matrices are used heavily in shaders, physics engines, and linear algebra pipelines. They are larger (9 values) but compose naturally via matrix multiplication.

Axis-Angle

The axis-angle representation defines a rotation as a single angle around an arbitrary axis vector. It maps directly to the intuition of "rotate N degrees around this direction" and is closely related to quaternions: a quaternion can be constructed from an axis-angle pair, and vice versa.

Practical Applications

Understanding these representations and their conversions is essential for debugging camera systems, character controllers, inverse kinematics, robotic arm planning, and satellite attitude control. This tool lets you experiment with all four representations simultaneously and see their equivalence in real time.

Frequently Asked Questions

What is gimbal lock and why does it matter?
Gimbal lock occurs when two of the three Euler rotation axes align, collapsing three degrees of freedom into two. This happens when the pitch angle reaches exactly +90 or -90 degrees. In practice, it causes sudden jumps or loss of control in animations and camera systems. Quaternions solve this problem entirely.
Why do game engines use quaternions instead of Euler angles?
Game engines prefer quaternions because they avoid gimbal lock, are compact (4 floats vs. 9 for a matrix), compose efficiently, and support smooth interpolation via SLERP. Unity, Unreal Engine, and Godot all store rotations as quaternions internally, even though their editors may display Euler angles for convenience.
What does the rotation order (XYZ, ZYX, etc.) mean?
Rotation order determines the sequence in which the three axis rotations are applied. XYZ means rotate around X first, then Y, then Z. Different orders produce different final orientations from the same angle values. Unity uses ZXY order, Unreal uses ZYX, and Three.js defaults to XYZ. Choosing the wrong order is a common source of bugs.
How do I convert between Euler angles and quaternions?
Conversion formulas involve trigonometric functions of half-angles. For Euler to quaternion: compute sine and cosine of each half-angle, then combine them based on the rotation order. This tool performs the conversion automatically — just enter values in either representation and the other updates instantly.
What is SLERP and why is it important?
SLERP (Spherical Linear Interpolation) is a method for smoothly interpolating between two quaternion rotations along the shortest path on a 4D sphere. Unlike linear interpolation of Euler angles (which can cause wobble and gimbal lock), SLERP produces constant-speed, artifact-free rotation transitions — essential for smooth character animation and camera movement.