Rotate 3d

Three axes: z, y and z

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);
 }
 
	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, 0, 60deg);
 }
 
	x=1, y=-1, z=1, rotation angle = 60deg