Q:

How to apply text rotation in CSS?

I am trying to achieve the below

This is what I have achieved so far

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>

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

A:

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

