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

  


 Welcome To Pakainfo.coim! 

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


  
free Download Source code

How to correctly position rotated text using CSS?

.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);
}

How to Rotate Text in CSS?

You can rotate text in CSS using the transform property. Here is an example of how to rotate text 45 degrees clockwise:

.rotate-text {
  transform: rotate(45deg);
}

This will rotate the text within an HTML element with the class rotate-text by 45 degrees. You can adjust the degree value to rotate the text by different angles.

You can also rotate text vertically using the writing-mode property. Here’s an example of how to rotate text vertically:

.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

This will rotate the text within an HTML element with the class vertical-text so that it is oriented vertically from right to left. The text-orientation property ensures that the text remains upright rather than being rotated along with the writing mode.

You can combine both the transform and writing-mode properties to rotate text at different angles and orientations.
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.