YogeshChauhan.com

How to create a vertically rotating texts using CSS?

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.

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

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.

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.

dreamhost

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 uninstall Cocoapods from the Mac OS? #4 How to Use SQL MAX() Function with Dates? #5 How to add Read More Read Less Button using JavaScript? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Apr 7 Solution for “Yarn build: Failed because of a stylelint error” Apr 7 Make sure your links have descriptive text Apr 7 How to add Laravel to WordPress using Sage theme (and install Tailwind CSS)? Apr 2 How to create a sidebar using pure CSS? Apr 1 How to switch dark and light themes using pure CSS? Apr 1 How to calculate elapsed time in JavaScript?

You might also like these

LEFT JOIN in PostgresPostgresHow to set default timezone using PHP?PHPA Quick Guide to Object-Oriented Programming in PHPPHP5 Ways to Loop Through JavaScript ArraysJavaScriptHow to send and receive query strings via links in Angular 9?AngularHow to make a web page look good on any device?HTML