Yogesh Chauhan's Blog

How to create a vertically rotating texts using CSS?

in CSS on March 21, 2021

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.


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
Quick Introduction to 11 Array Iteration Methods in JavaScriptJavaScriptLEFT JOIN in PostgresPostgresWhat does Containment mean in React?ReactSQL Right JoinSQL/MySQLSome SQL LIKE Operators We Need to Keep in MindSQL/MySQLWhat’s the difference between a Framework and a Library?Miscellaneous