CSS is the language used to style web pages, and you can do a lot with it, including some advanced text effects. “CSS rotate text” may be something you search for often when you are doing web development. Fortunately, there are multiple ways to use CSS to rotate your text. Which one you use depends on the type of effects you want to achieve.

CSS rotate text: using writing-mode

You can use the CSS writing-mode property to set whether the lines of text in an element are laid out horizontally or vertically. Here is the syntax of this CSS property:

writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr;
The Web Developer Bootcamp 2022

Last Updated March 2022

  • 615 lectures
  • All Levels
4.7 (235,705)

COMPLETELY REDONE – The only course you need to learn web development – HTML, CSS, JS, Node, and More! | By Colt Steele

Explore Course

Here are what each of these values means:

Here is an example of using writing mode to rotate text. Here is the CSS:

.horizontal-tb {
  writing-mode: horizontal-tb;
  margin-bottom: 1em;
}

.vertical-rl {
  writing-mode: vertical-rl;
}

.vertical-lr {
  writing-mode: vertical-lr;
}

.sideways-rl {
  writing-mode: sideways-rl;
}

.sideways-lr {
  writing-mode: sideways-lr;
}

Here is the HTML:

<div class=”box horizontal-tb”>writing mode 
  <br>horizontal-tb
</div>

<div class=”box vertical-rl”>
  writing mode 
  <br>vertical-rl
</div>

<div class=”box vertical-lr”>
  writing mode 
  <br>vertical-lr
</div>

<div class=”box sideways-rl”>
  writing mode 
  <br>sideways-rl
</div>

<div class=”box sideways-lr”>
  writing mode 
  <br>sideways-lr
</div>

And here is the result:

example CSS rotate text: using writing-mode

You can also see the code in action on this JSFiddle.

CSS rotate text: using text-orientation

The CSS text-orientation property sets the orientation of the characters in a line of text. It only affects these characters when the writing-mode property is set to one of the vertical modes. It does nothing to text when the writing mode is set to horizontal-tb. Here is the syntax of this CSS property:

text-orientation: mixed | upright | sideways | sideways-right;

Here are what these values will do to the text:

To understand what some of these values do, it is best to see an example. Here is some CSS using the text-orientation CSS property:

.mixed {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.upright {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

.sideways {
  writing-mode: vertical-rl;
  text-orientation: sideways;
}

.sideways-right {
  writing-mode: vertical-rl;
  text-orientation: sideways-right;
}

Here is the HTML that the CSS above will get applied to:

<div class=”box mixed”>
  text orientation 
  <br>mixed
</div>

<div class=”box upright”>
  text orientation 
  <br>upright
</div>

<div class=”box sideways”>
  text orientation
  <br>sideways
</div>

<div class=”box sideways-right”>
  text orientation 
  <br>sideways-right
</div>

And here is the result:

example text-orientation

To see this code in action, you can visit this JSFiddle.

CSS rotate text: using transform

The two CSS properties we already explored will rotate your text, but you don’t have many options. After all, they are mainly used to align text on the page the way various languages are written. If you want more flexibility when rotating text, use the text-transform CSS property. You can use this property to apply a 2D or 3D transformation to an element.

The CSS transform property is often used with these static values to transform text in various ways:

However, you can do much more with the transform property when you use it in conjunction with various CSS functions like these:

There are quite a few more of these CSS functions that you can use to apply custom transformations to the text on a web page, but for rotating text, you should find one in this list that will do the job.

Here is an example CSS stylesheet using these CSS functions along with the CSS transform property:

.rotate {
  transform: rotate(45deg);
}

.rotate3d {
  transform: rotate3d(1, 1, 1, 45deg);
}

.rotateX {
  transform: rotateX(60deg);
}

.rotateY {
  transform: rotateY(60deg);
}

.skew {
  transform: skew(20deg, 20deg);
}

.skewX {
  transform: skewX(20deg);
}

.skewY {
  transform: skewY(20deg);
}

And here is the HTML it is being applied to:

<div class=”box rotate”>
  transform with 
  <br> rotate(45deg)
</div>

<div class=”box rotate3d”>
  transform with 
  <br> rotate3d(1, 1, 1, 45deg)
</div>

<div class=”box rotateX”>
  transform with 
  <br> rotateX(60deg)
</div>

<div class=”box rotateY”>
  transform with 
  <br> rotateY(60deg)
</div>

<div class=”box skew”>
  transform with 
  <br> skew(20deg, 20deg)
</div>

<div class=”box skewX”>
  transform with 
  <br> skewX(20deg)
</div>

<div class=”box skewY”>
  transform with 
  <br> skewY(20deg)
</div>

Here is the result when this code is run in a browser:

example code result

You can also find this example running live on this JSFiddle.

CSS rotate text: using animation

The examples we saw so far do one type of rotating text, but if what you mean by “rotate” is “rotating through a list of values in an element,” then none of these examples will be what you are looking for. You will have to use animation. You may be thinking that you have to use JavaScript for this, but you don’t. You can actually do it with just CSS. You don’t have to learn a new programming language to get this effect and these types of CSS animations will run more smoothly than JavaScript animations because it uses built-in browser functionality to control them.

CSS animations allow you to animate transitions from one CSS style to another. To use CSS animations, you must use two components: a style that describes the animation you will be using and a set of keyframes that determine the start and end states of the animation styles, as well as any intermediate states.

The best way to see this in work is through an example. Let’s say that we have a website banner that we wanted to rotate through the following values:

We really only have to rotate the last value. To start, create an HTML page like the following:

<h2 class=”sentence”>One of my favorite browsers is
  <div class=”rotate”>
    <span>Chrome.</span>
    <span>Firefox.</span>
    <span>Safari.</span>
    <span>Opera.</span>
    <span>Edge.</span>
    <span>IE.</span>
  </div>
</h2>

If you render this code in a browser without CSS, here is how it looks:

render this code in a browser without CSS

Here is the CSS code to make the browser name rotate:

.sentence {
      color: #222;
      font-size: 30px;
      text-align: left;
}

.sentence span {
color: blue;
}

.rotate {
    display: inline;
text-indent: 10px;
}

.rotate span {
position: absolute;
opacity: 0;
overflow: hidden;
width: 100%;
color: blue;
}

.rotate span {
animation: rotateWords 18s linear infinite 0s;
}

.rotate span:nth-child(2) {
animation-delay: 3s;
}

.rotate span:nth-child(3) {
animation-delay: 6s;
}

.rotate span:nth-child(4) {
animation-delay: 9s;
}

.rotate span:nth-child(5) {
animation-delay: 12s;
}

.rotate span:nth-child(6) { 
animation-delay: 15s;
}

@keyframes rotateWords {
    0% { opacity: 1; animation-timing-function: ease-in; height: 0px;     }
    8% { opacity: 1; height: 60px; }
    19% { opacity: 1; height: 60px; }
    25% { opacity: 0; height: 60px; }
    100% { opacity: 0; }
}

By default, all the words in the browser list are hidden. But we target each word with the “rotateWords” animation function, which eases each word in and then fades it away. This loop runs for 18 seconds and each word in the list is given an animation delay that offsets when its animation will start so that the current browser name fades in as the next fades out. While a static image doesn’t do it justice, here is how it looks now in the middle of a rotation:

in the middle of a rotation

There is actually quite a variety of effects you can use to rotate text using CSS animation. This is only one option. Play around with the values and functions to see what type of effects you can create. You can experiment by copying this JSFiddle where the code is running live.With CSS you can do many advanced effects in the browser without writing any JavaScript code. To learn more CSS, check out our article on CSS onclick, read about the difference between flexbox and grid in CSS, or learn about how SCSS differs from CSS. To become a CSS expert, look no further than our CSS courses. Whether you are a beginner or are looking to improve your CSS skills, we have a course for you.

Page Last Updated: May 2022

Top courses in CSS

Advanced CSS and Sass: Flexbox, Grid, Animations and More!
Jonas Schmedtmann
4.8 (36,031)
Bestseller
CSS - The Complete Guide 2022 (incl. Flexbox, Grid & Sass)
Academind by Maximilian Schwarzmüller, Maximilian Schwarzmüller, Manuel Lorenz
4.7 (13,911)
Bestseller
50 Projects In 50 Days - HTML, CSS & JavaScript
Brad Traversy, Florin Pop
4.7 (7,481)
Build Responsive Real-World Websites with HTML and CSS
Jonas Schmedtmann
4.8 (75,847)
Bestseller
Responsive Web Design Essentials - HTML5 CSS3 Bootstrap
Daniel Walter Scott
4.7 (4,496)
Bestseller
HTML5 + CSS3 + Bootstrap: The Beginner Web Design Course
Phil Ebiner, Nick Walter, Video School
4.7 (1,416)
SASS - The Complete SASS Course (CSS Preprocessor)
Code And Create, George Lomidze, Lasha Nozadze
4.5 (944)
Bestseller
Learn to Code CSS Course from scratch: Beginner to Expert
Metla Sudha Sekhar
5 (21)
Highest Rated

More CSS Courses

CSS students also learn

Empower your team. Lead the industry.

Get a subscription to a library of online courses and digital learning tools for your organization with Udemy for Business.

Request a demo