# rotation

Note: This documentation is for the old 1.1.0 version of A-Frame. Check out the documentation for the current 1.6.0 version

The rotation component defines the orientation of an entity in degrees. It takes the pitch (`x`), yaw (`y`), and roll (`z`) as three space-delimited numbers indicating degrees of rotation.

All entities inherently have the rotation component.

## Value

A-Frame uses a right-handed coordinate system. When aligning our right hand’s thumb with a positive axis, our hand will curl in the positive direction of rotation.

Axis Description Default Value
x Pitch, rotation about the X-axis. 0
y Yaw, rotation about the Y-axis. 0
z Roll, rotation about the Z-axis. 0

## Relative Rotation

Child entities inherit from world-space rotations from parent entities. Consider this scene:

The world-space rotation of `#child1` would be `0 45 0` as inherited by the entity. In the local parent’s space, `#child1`‘s rotation would be `0 0 0`.

The world-space rotation of `#child2` would be `15 90 30`, by combining the rotation with the parent entity. In the parent’s local space, `#child2`‘s rotation would be `15 45 30`.

## Updating Rotation

For performance and ergonomics, we recommend updating rotation directly via the three.js Object3D `.rotation` Euler (in radians) versus via `.setAttribute`.

This method is easier because we have access to all the Euler utilities, and faster by skipping `.setAttribute` overhead and not needing to create an object to set rotation:

### Getting Rotation

Updates at the three.js level will still be reflected in A-Frame when doing `entityEl.getAttribute('rotation');`. When calling `.getAttribute('rotation')`, A-Frame will convert from radians and degrees and return a normal JavaScript object with x/y/z properties.

### Order of Transformations

Transformations are applied to entities in this order: