## How do angles work in 3D rotation?

Question

As you know, for 3D transformations you need methods like rotateX(20deg) I know how to use both 2D and 3D transforms but what I can't understand is how angles work. I mean, if I have to rotate a div along X axis in clockwise direction (I don't even know if saying clockwise/anti-clockwise is right or wrong), I don't know whether to use +ve angle or -ve angle, until I try them individually to get the desired rotation.

Check the following example.

``````#wrapper {
position: relative;
}
div[id^="d"] {
position: absolute;
width: 200px;
height: 200px;
color: white;
font-size: 3em;
text-align: center;
}
#d1 {
background: red;
top: 200px;
left: 400px;
transform: perspective(1000px) rotateY(70deg);
transform-origin: right;
}
#d2 {
background: blue;
left: 600px;
transform: perspective(1000px) rotateX(-70deg);
transform-origin: bottom;
}
#d3 {
background: purple;
top: 200px;
left: 800px;
transform: perspective(1000px) rotateY(-70deg);
transform-origin: left;
}
#d4 {
background: grey;
top: 200px;
left: 600px;
}
#d5 {
background: lightgreen;
top: 400px;
left: 600px;
transform: perspective(1000px) rotateX(70deg);
transform-origin: top;
}
#d6 {
background: orange;
top: 200px;
left: 600px;
z-index: 200;
}``````
``````    <div id="wrapper">
<div id="d1">d1</div>
<div id="d2">d2</div>
<div id="d3">d3</div>
<div id="d4">d4</div>
<div id="d5">d5</div>
<div id="d6">d6</div>
</div>``````

I'm trying to make a cube. I'm sure I'll make it without any problem, anyhow. But if you see, d3 and d5 both have clockwise rotations (according to me), but one has +ve angle and other has -ve angle!

I don't understand this. How do I understand it?

Show source

## Answers to How do angles work in 3D rotation? ( 1 )

1. In the specs you can read:

rotate() = `rotate( <angle> )`
specifies a 2D rotation by the angle specified in the parameter about the origin of the element, as defined by the transform-origin property. For example, rotate(90deg) would cause elements to appear rotated one-quarter of a turn in the clockwise direction.
[w3.org]

So a positive value means the element is rotated in the clockwise direction. Example:

``````div{
display:inline-block;
border:2px solid;
text-align:center;
margin:50px;
}
.plus{
transform:rotate(30deg);
}
.min{
transform:rotate(-30deg);
}``````
``````<div class="plus">positive</div>
<div class="min">negative</div>``````

If you need to define the rotation direction before you test it, you have to imagine the 3d [XYZ] coordinate system:

The clockwise and anti-clockwise directions work when the arrow is pointing towards you. For your specific example with the 3d cube, you will see that `#d3` and `#d5` aren't rotating in the same direction. `#d5` is rotating clockwise but `#d3` isn't. If you "look up to it" with the Y axis arrow pointing towards you can see it is rotating anti-clockwise.

Here is another example with a `rotateY()` and `rotateX()` transforms. `rotateX()` is positive (clockwise direction) and `rotateY()` is negative (anti-clockwise direction):

``````div {
display: inline-block;
``<div>hover me</div>``