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

<div class="normal rotated">Rotated</div>
<div class="normal">Not rotated</div>
.normal {
padding: 20px;
margin: 20px;
width: 120px;
background: #546D62;
color: white;
font-family: sans-serif;
}
.rotated {
transform: rotate3d(1, 3, 1, 60deg);
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
??????
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
??????