rotate3d() CSS Function

Description

The rotate3d() CSS function is used to rotate elements in a three-dimensional space.

Syntax

transform: rotate3d( <numberX> , <numberY> , <numberZ> , <angle> );

Values

lt;numberX>Is a lt;number> describing the x-coordinate of the vector denoting the axis of rotation which could between 0 and 1.
lt;numberY>Is a lt;number> describing the y-coordinate of the vector denoting the axis of rotation which could between 0 and 1.
lt;numberZ>Is a lt;number> describing the z-coordinate of the vector denoting the axis of rotation which could between 0 and 1.
lt;angle>Is an lt;angle> representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.

Example

HTML

<div class="normal rotated">Rotated</div>

<div class="normal">Not rotated</div>

CSS

.normal {

    padding: 20px;

    margin: 20px;

    width: 120px;

    background: #546D62;

    color: white;

    font-family: sans-serif;

}

.rotated {

    transform: rotate3d(1, 3, 1, 60deg);

}

Result