Rotate 3d

Watch out! vertical Y axis in 3d is inverted.
Positive values are down

We need to define an axis around which the element will turn.

The first point of the axis is the default transform-origin. We don't have to redefine it.
The second point of the axis is defined by giving the 3 first values for rotate3d property :

transform: rotate3d(x, y, z, rotation angle);

1 point: transform-origin by default

2 point : construct by
 .rotated {
 transform: rotate3d (1, -1, 0, 60deg);
 }
 

1 point: transform-origin by default

2 point : construct by
 .rotated {
 transform: rotate3d (1, -1, 1, 60deg);
 }