How to Rotate HTML Text 90 Degrees

Written by matthew burley
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Rotate HTML Text 90 Degrees
(Stockbyte/Stockbyte/Getty Images)

Creating a website requires the designer to have at least some basic knowledge of HTML, which is a formatting language used to position Web elements and content on a Web page. This data is then read by a Web browser to determine how the content should be displayed. To effectively format and customise these elements, it becomes necessary to apply CSS rules and styles. CSS makes it possible to change most of the elements of your website, including the orientation of textual elements. Particularly, it offers the option to rotate text by a specific number of degrees.

Skill level:


  1. 1

    Open your Web editing program.

  2. 2

    Select the page where the 90-degree text rotation will be applied, then open it.

  3. 3

    Navigate to the location on your page where the rotated text will be inserted.

  4. 4

    Create a new "<div>" element in the body of your page with a "class" style to be referred to in the CSS. For example, "<div class="text-rotation">test</div>" would create an HTML element that displays "test."

  5. 5

    Navigate to the "<head>" section of your Web page and create a new style that corresponds to the class of your "<div>" element. From the last example, this would be "<style type="text/css">.text-rotation {display: block; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg);}</style>". Note the "." before the name of the CSS class.

Tips and warnings

  • To apply the text rotation for Internet Explorer, include the following filter in your source code: "filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=x);". The "(rotation=x)" element can be changed to 0, 1, 2 or 3 to rotate the text by 0, 90, 180, 270 degrees, respectively.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.