priyanka.sarkar priyanka.sarkar - 2 months ago 18
CSS Question

How to apply text rotation in CSS?

I am trying to achieve the below

enter image description here

This is what I have achieved so far

enter image description here

by using the below css

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 90px;
height: 20px;
background-color: yellow;
/* Rotate div */
transform: rotate(270deg);
}
</style>
</head>
<body>
<div><font color="red"><b>ACTIVE</b></font></div>
</body>
</html>


Well I am looking for the text rotation... How can I achieve the same?

Thanks in advance.

Answer

Just change the value of transform: rotate(270deg) to transform: rotate(90deg) , then add transform-origin property for set a rotated element's base placement.

div {
    width: 90px;
    height: 20px;
    background-color: yellow;
    /* Rotate div */   
    transform: rotate(90deg);
    transform-origin: left;
}

It's no style for text rotation

Comments