CSS Function - rotateX()

The rotateX() function in CSS is used to rotate an element around the x-axis (horizontal) on the two-dimensional surface. The result is a <transform-function> datatype.

The axis of rotation passes through the transform origin. Using the CSS property transform-origin, the transform origin can be changed and customized.

The rotation of the element created by the rotateX() function is specified by an <angle>. The movement of the rotation will be clockwise, if the angle value is positive and will be anti-clockwise if the value is negative.

Possible values

The function rotateX() can take only one parameter. It specifies the angle of rotation.

  • <angle>: Represented in degrees. A positive angle rotates the element in clockwise direction; whereas a negative value rotates it anti-clockwise.

Syntax

transform: rotateX(35deg) | rotateX(-35deg);

CSS rotateX() - Combination of Values

Following is an example of rotateX() function with various values as parameter, such as deg, turn, grads:

<html>
<head>
<style>
   #container {
      display: flex;
   }

   #sample-div {
      height: 100px;
      width: 100px;
      border: 2px solid black;
      background-image: url('images/logo.png');
      margin-bottom: 2em;
   }

   section {
      padding: 25px;
      border: 2px solid red;
   }

   .rotate-x-positive {
      transform: rotateX(45deg);
      background-image: url('images/logo.png');
   }

   .rotate-x-negative {
      transform: rotateX(-75deg);
      background-image: url('images/logo.png');
   }

   .rotate-x-turn {
      transform: rotateX(2.5turn);
      background-image: url('images/logo.png');
   }

   .rotate-x-grads {
      transform: rotateX(2grads);
      background-image: url('images/logo.png');
   }
   </style>
   </head>
   <body>
   <div id="container">
      <section>
         <p>no rotation</p>
         <div id="sample-div"></div>
      </section>
      <section>
         <p>rotateX(45deg)</p>
         <div class="rotate-x-positive" id="sample-div"></div>
      </section>
      <section>
         <p>rotateX(-75deg)</p>
         <div class="rotate-x-negative" id="sample-div"></div>
      </section>
      <section>
         <p>rotateX(2.5turn)</p>
         <div class="rotate-x-turn" id="sample-div"></div>
      </section>
      <section>
         <p>rotateX(2grads)</p>
         <div class="rotate-x-grads" id="sample-div"></div>
      </section>
   </div>
</body>
</html>
Advertisements