rotate3d shorthand

Question

How to combine rotateX(50deg) rotateY(20deg) rotateZ(15deg) in shorthand rotate3d()?

Answer 1

Syntax:

rotate3d(x, y, z, a)

Values:

• x Is a describing the x-coordinate of the vector denoting the axis of rotation.
• y Is a describing the y-coordinate of the vector denoting the axis of rotation.
• z Is a describing the z-coordinate of the vector denoting the axis of rotation.
• a Is an representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.

Like in :

.will-distort{
    transform:rotate3d(10, 10, 10, 45deg);
}

Fiddled here

Caniuse it here

More docs about it