CODEWITHSUNDEEP
css
priyanka.sarkar
priyanka.sarkar

Reputation: 26498

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>

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

Upvotes: 0

Views: 1144

Answers (3)

Hitesh Misro
Hitesh Misro

Reputation: 3461

Use CSS3 @keyframes animation to get after it. Check this snippet:

div {
    width: 90px;
    height: 20px;
    background-color: yellow;
    /* Rotate div */   
    transform: rotate(270deg);
    position:relative;
    top:40px;
}
b{ 
  position:absolute;
  transform: rotate(180deg);
  -webkit-animation: rotate 3s; 
  -moz-animation: rotate 3s; 
  animation: rotate 3s;
}
@-webkit-keyframes rotate {
    0%   {transform: rotate(360deg);}
    100% {transform: rotate(180deg);}
}

@-moz-keyframes rotate {
    0%   {transform: rotate(360deg);}
    100% {transform: rotate(180deg);}
}

@keyframes rotate {
    0%   {transform: rotate(360deg);}
    100% {transform: rotate(180deg);}
}
<div><font color="red"><b>ACTIVE</b></font></div>

Upvotes: 1

frnt
frnt

Reputation: 8795

Instead of rotating your div, rotate your <b> tag and try,

div {
    width: 20px;
    height: 110px;
    background-color: yellow;
    display:block;
    color:red;
    padding-top:40px;
  }
div > b{
   transform: rotate(-270deg);
   display:block;
   }  
<div><b>ACTIVE</b></div>

Upvotes: 1

Engkus Kusnadi
Engkus Kusnadi

Reputation: 2506

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

Upvotes: 2

Related Questions