rotateX() CSS Function

Description

The rotateX() CSS function rotates an element around the X axis by a given angle.

Syntax

transform: rotateX(<angle>);

Values

  • <angle>A positive value rotates the element clockwise, a negative value rotates the element counter clockwise.

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: rotateX(45deg);

}

Browser Support

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

Last updated by CSSPortal on: 1st December 2019