Simple HTML Rotate Text On Click

by | CSS Examples

Behold back to the beginning of the World Wide Web when CSS support was non-existent among browsers and you needed to make designs with tables. In the event that you needed to rotate text on a web page, you needed to make real pictures and utilize convoluted HTML tables to adjust them appropriately. Luckily, the two browsers and CSS have made considerable progress since at that point. Rotating text today just requires the utilization of the CSS transform property. So let us now have a brief talk on an example of Simple Text which is made to rotate on Click using HTML and CSS.

All text transformation, for example, skewing, rotating, scaling, and so on in CSS3 deals with the transform property. Rotating text is just a single little element of this property that empowers designers to make entangled text impacts in a jiffy.

Simple HTML Rotate Text On Click Live Preview

See the Pen Simple test rotation – bug opera 27 / OSX by Marc Beuret (@MarcBT) on CodePen.

In the previous design, we saw how the text rotates itself to present a new text to the viewers. But this case is different. You need to click on the text to rotate it to a certain degree. Click on it again and you will then be directed to the original state.

As we discussed it, you can utilize the rotate function of the transform property to rotate a component. To rotate the text, you have to utilize the function “rotate(180 deg). I used ‘180 deg’ because the designer has used the same angle for this design as well. You can also use 45, 90, 180 and 270 according to what fits your requirement.

Along with the rotating impact, you also get a hover effect in this design. Hover over the box and see how it highlights itself.

Can you see a table below? So this is to give you more of the details about this ‘HTML CSS Rotate Text’ example.

About This Design
Author: Marc BeuretDemo/Source Code
Made with: HTML/CSS/JSResponsive: No