Modern browsers and CSS3 begins to allow us much more freedom using standard text without the need of images. Not only does this speed up page load times, it also lowers bandwidth costs as well. Using CSS3, many standard DOM (Document Object Model) objects can easily be rotated, such as: images, text, block elements, etc…
Let's explore how we can use the transform CSS property to accomplish this.
To begin, some basic HTML is required before we can apply the CSS code to it. In the example below, I will demonstrate creating a menu with the word menu being rotated:
Next, the CSS must be added to rotate the word menu so that it will appear vertically:
With a bit more CSS, the following example can be produced without the need of a single issue:
Using some CSS3, rotating text or images or many other DOM elements is now extremely simple! Published on Mar 7, 2019 Tags: The Ultimate CSS Tutorial for Beginner Programmers
| transform
Did you enjoy this article? If you did here are some more articles that I thought you will enjoy as they are very similar to the article
that you just finished reading.
Jamie Munro is the author of ASP.NET MVC 5 with Bootstrap and Knockout.js,
Knockout.js: Building Dynamic Client-Side Web Applications,
20 Recipes for Programming MVC 3,
and 20 Recipes for Programming PhoneGap. He has been developing websites and web applications for over 20 years. Jamie began his writing career in 2009. As the success of Jamie's blog grew, he turned his writing passion to books about web development in hopes that his many years of experience could be passed on to his readers. No matter the programming language you're looking to learn, I've hopefully compiled an incredible set of tutorials for you to learn; whether you are beginner
or an expert, there is something for everyone to learn. Each topic I go in-depth and provide many examples throughout. I can't wait for you to dig in
and improve your skillset with any of the tutorials below.
<div id="content">
Some content goes here in the middle…
<div id="menu">
Menu
</div>
</div>
#menu {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
Summary of CSS transformations
Related Posts
Tutorials
Learn how to code in HTML, CSS, JavaScript, Python, Ruby, PHP, Java, C#, SQL, and more.