How to create a vertically rotating texts using CSS?

The concept is in placing the elements using position property in CSS and then using animation to move the texts vertically.

HTML

Let’s start with simple HTML.

CSS

The important part is setting the font-size and line-height properties. Change other properties as per your requirements.

.container {
  font-size: 40px;
  line-height: 50px;
  color: white;
}

Let’s set the height of the elements inside the container.

.container p {
  height: 50px;
}

.container b {
  height: 50px;
}

Set the float property to left for both of the elements inside the container. Set a margin-right property for the first element to add a gap between the words.

.container p {
  height: 50px;
  float: left;
  margin-right: 0.3em;
}

.container b {
  height: 50px;
  float: left;
}

Now let’s add the style for the texts we want to move vertically with the animation.

You won’t see the texts moving vertically as the container with .words class is missing the position property. Let’s add that and see the results.

The texts are moving vertically now.

Now, we don’t need all the words to be displayed so we can hide the additional words by setting overflow property to hidden for the b tag. We also need to set all the words in same line. We can set the position property of the b tag to relative and setting it’s top property to 40px.

Everything is working out pretty well but when the animation starts then ends and then starts, it creates a transition which is not smooth — basically it changes the last word to the first one without any rotation. Let’s fix that by setting top property to 0 for the container with .words class.

And that’s it. This is our final result and code.

Credit goes to this example. The explanation is mine.

Share this post