Skip to content
Related Articles

Related Articles

Improve Article

CSS | rotateX() Function

  • Last Updated : 07 Aug, 2019
Geek Week

The rotateX() function is an inbuilt function which is used to rotate an element around the x-axis.

Syntax:

rotateX( angle )

Parameters: This function accepts single parameter angle which represents the angle of rotations. The positive and negative angles rotate the elements in clockwise and counter-clockwise respectively.

Below examples illustrate the rotateX() function in CSS:
Example 1:




<!DOCTYPE html> 
<html
<head
    <title>CSS rotateX() function</title
    <style
        body {
            text-align:center;
        }
        h1 {
            color:green;
        }
        .rotateX_image {
            transform: rotateX(60deg);
        }
    </style
</head
  
<body
    <h1>GeeksforGeeks</h1>
    <h2>CSS rotateX() function</h2>
      
    <img class="rotateX_image" src
        alt="GeeksforGeeks logo"
</body
</html>

Output:



Example 2:




<!DOCTYPE html> 
<html
<head
    <title>CSS rotateX() function</title
    <style
        body {
            text-align:center;
        }
        h1 {
            color:green;
        }
        .GFG {
            font-size:35px;
            font-weight:bold;
            color:green;
            transform: rotateX(60deg);
        }
    </style
</head
  
<body
    <h1>GeeksforGeeks</h1>
    <h2>CSS rotateX() function</h2>
      
    <div class="GFG">Welcome to GeeksforGeeks</div
</body
</html>

Output:

Supported Browsers: The browsers supported by rotateX() function are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Safari
  • Opera



My Personal Notes arrow_drop_up
Recommended Articles
Page :