How to Rotate the <div> Element by 90 Degrees

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

some text

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>