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 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
An Example of Cross-site Scripting (XSS) Attack in PHP and How to Avoid It?PHPHow to scroll contents of HTML body horizontally and vertically using JavaScript?JavaScriptHow to change CSS with jQuery?CSSKilling A Project Part 3: How can an organization ensure that a doomed project is killed as early as possible?MiscellaneousSome Useful Operators in The SQL WHERE ClauseSQL/MySQLHow to add transparent text on top of an image using CSS?CSS