css rotate text – How to rotate text 90 degrees inline?

css rotate text – transform Property property allows you to rotate, scale, move, skew, etc. Rotate text can be done by using rotate() function in CSS.

css rotate text

Rotate text 90 degrees with CSS – The transform property applies a 2D or 3D transformation to an element.

div.a {
  transform: rotate(20deg);
}

div.b {
  transform: skewY(20deg);
}

div.c {
  transform: scaleY(1.5);
}

Example

<html>
  <br><br>
<p class="rotate"> Welcome To Pakainfo.coim! </p>
</html>

CSS Code

.rotate {

/* Safari Web browser */
-webkit-transform: rotate(-90deg);

/* Firefox Web browser */
-moz-transform: rotate(-90deg);

/* IE Web browser */
-ms-transform: rotate(-90deg);

/* Opera Web browser */
-o-transform: rotate(-90deg);

float: left;

}

Example

#rotate-text {
   width: 25px;
   transform: rotate(90deg);
}

//HTML Code

<div id="rotate-text">
  <p>free Download Source code</p>
</div>

How to correctly position rotated text using CSS?

<div class="applecart">

<div class="top-right"></div>

<div class="top-left"></div>

<div class="bottom-right"></div>

<div class="bottom-left"></div>
  
</div>

.applecart {
  width:80%;
  height:80vh;
  margin:5vh auto;
  border:2px solid;
  position:relative;
}

.top-right {
  transform-origin: top right;
  right:0;
  top:0;
  transform: rotate(-90deg) translateY(-100%);
}
.top-right:hover {
  transform: rotate(90deg) translateX(100%)
}

.top-left {
  transform-origin: top left;
  left:0;
  top:0;
  transform: rotate(-90deg) translateX(-100%);
}
.top-left:hover {
  transform: rotate(90deg) translateY(-100%) 
}

.bottom-right {
  transform-origin:bottom right;
  right:0;
  bottom:0;
  transform: rotate(-90deg) translateX(100%);
}
.bottom-right:hover {
  transform: rotate(90deg) translateY(100%)
}
.bottom-left {
  transform-origin:bottom left;
  left:0;
  bottom:0;
  transform: rotate(-90deg) translateY(100%);
}
.bottom-left:hover {
  transform: rotate(90deg) translateX(-100%)
}

.applecart > [class] {
  position: absolute;
  background-color: lightblue;
  padding:10px;
  font-size:25px;
  text-transform:uppercase;
  font-family:sans-serif;
}
.applecart > [class]::before {
  content:attr(class);
}

Don’t Miss : Ad Rotate Text Animation Effects Using JQuery

I hope you get an idea about css rotate text.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.