Learn
Introduction to A-Frame
Rotation

Currently, the box looks like a 2D square because itâ€™s facing dead center towards the default camera. Letâ€™s change that.

To rotate the box, we can change the `rotation` component:

``````<a-scene>
<a-box
color="red"
position="0 2 -5"
rotation="33 45 0">
</a-box>
</a-scene>``````

This will rotate our box at an angle:

• The x-axis rotation is 33Â°
• The y-axis rotation is 45Â°
• The z-axis rotation is 0Â°

A-Frameâ€™s rotational unit is in degrees, although it will get internally converted to radians when passing to three.js.

To determine the positive direction of rotation, use the right-hand rule:

Point our thumbs towards the direction of the positive x, y, or z-axis with your fingers curled. As a reminder:

• Positive x-axis goes right.
• Positive y-axis goes up.
• Positive z-axis goes out of the screen towards us.

The direction in which your fingers curl is the positive direction of rotation. The other way is the negative direction of rotation.

### Instructions

1.

Give the `<a-box>` primitive a rotation of `"0 45 45"`.