Rotate 3d

Schematic representation of the coordinate system: x to the right, y down, z towards to viewer

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);





Rotate me!
1 point: transform-origin by default

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

i.e., x=1, y=-1, z=0, rotation angle = 60deg





Rotate me!
1 point: transform-origin by default

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

i.e., x=1, y=-1, z=1, rotation angle = 60deg