YogeshChauhan . com

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.

amazon

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 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

Solution for Xcode 11 Command PhaseScriptExecution failed with a nonzero exit code errorMiscHow to Create a Copy of a Table in SQL and MySQL?SQL/MySQLHow to check if radio button is checked or not using JavaScript?JavaScriptSequence generator (range) using JavaScript Array.from()JavaScript3 Ways we can create URLSearchParams Objects in JavaScriptJavaScriptCSS backface-visibility PropertyCSS