W3docs
en
Log in

How to Rotate the <div> Element by 90 Degrees

In this tutorial, you can see how to rotate the HTML <div> element by 90 degrees. For that purpose, use the CSS transform property with the “rotate” value.

Tags

Solution with the CSS transform property

Before showing how to rotate the HTML <div> element, it should be noted that applying the 90deg rotation to the square would result in the same appearance. You need to add the width and height properties for the container and specify the transform property with the “rotate(90deg)” value.

Example of rotating the <div> element by 90 degrees:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #container {
        width: 120px;
        height: 120px;
        background-color: #45d169;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
      }
    </style>
  </head>
  <body>
    <div id="container">some text</div>
  </body>
</html>
Try it Yourself »

Result

<div class="demo px-2.5 mt-1 mb-5 not-prose">``<div id="example">some text</div> </div>Now, let’s see an example, where we use a normal <div> and a 45deg rotated <div> to show the effect.

Example of rotating the <div> element by 45 degrees:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 120px;
        height: 120px;
        background-color: #45d169;
      }
      .rotated {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        background-color: #3e6ac2;
      }
    </style>
  </head>
  <body>
    <div>Normal</div>
    <div class="rotated">Rotated</div>
  </body>
</html>
Try it Yourself »