CSS Function - rotate()

The rotate() function in CSS rotates an element around a fixed point on the two-dimensional surface, without causing any deformation. The result is a <transform-function> datatype.

The fixed point around which the element rotates is also known as the transform origin, that defaults to center of the element. Using the CSS property transform-origin, the transform origin can be changed and customized.

The rotation of the element created by the rotate() 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. When the rotation is by 180deg, it is called point reflection.

Possible values

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

  • <angle>: Represented in degrees. The direction of rotation is based on the writing direction.

    • When the direction is left-to-right context, a positive angle rotates the element in clockwise direction; whereas a negative angle rotates it in anti-clockwise direction.

    • When the direction is right-to-left context, a positive angle rotates the element in anti-clockwise direction; whereas a negative angle rotates it in clockwise direction.

Syntax

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

CSS rotate() - Rotation in left-to-right direction

Following is an example of rotate() function with various values as parameter, such as deg, turn, grads, in left-to-right direction:

<html>
<head>
<style>
   #container {
      display: flex;
   }
   #sample-div {
      height: 100px;
      width: 100pX;
      border: 2py solid black;
      background-image: url(images/logo.png);
      margin-bottom: 2em;
   }

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

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

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

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

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

CSS rotate() - Rotation in right-to-left direction

Following is an example of rotate() function with various values as parameter, such as deg, turn, grads, in right-to-left direction:

<html dir="rtl">
<head>
<style>
   #container {
      display: flex;
   }
   #sample-div {
      height: 100px;
      width: 100pX;
      border: 2py solid black;
      background-image: url(images/logo.png);
      margin-bottom: 2em;
   }

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

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

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

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

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

CSS rotate() - Combining rotation with other tranform function

Following is an example of rotate() function used with translate() function with positive and negative values:

<html>
<head>
<style>
   div {
      position: absolute;
      left: 40px;
      top: 40px;
      width: 110px;
      height: 110px;
      background-color: lightblue;
   }

   .negative-rotate-translate {
      background-color: transparent;
      outline: 5px dotted red;
      transform: rotate(-55deg) translate(-10px);
   }

   .positive-rotate-translate {
      background-color: yellow;
      transform: rotate(35deg) translate(190px);
   }

   .positive-translate-rotate {
      background-color: green;
      transform: translate(190px) rotate(35deg);
   }
</style>
</head>
<body>
   <div>No function</div>
   <div class="negative-rotate-translate">
      -ve rotated
   </div>
   <div class="positive-rotate-translate">
      rotate()+
      translate()
   </div>
   <div class="positive-translate-rotate">
      translate()+
      rotate()
   </div>
</body>
</html>
Advertisements