How to rotate some text in html css?

Question

I want to do something like this.

I dont know the property of css should be used. my code is:

<h1><b>#GIRLBOSSES</b></h1>

CSS:

h1 b {
    position: absolute; 
    color: #fdd2e9; 
    margin-left: 127px; 
    margin-top: 191px;
}

Possible duplicate of [How do i rotate text in css](https://stackoverflow.com/questions/6028128/how-do-i-rotate-text-in-css) — Rob, Sep 27 '17 at 19:20

score 3 · Answer 1 · answered Sep 27 '17 at 19:15

You need several settings. Different for different browsers.

.rotate {
    -ms-transform: rotate(7deg); /* IE 9 */
    -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
    transform: rotate(7deg);
}

Look in JSfiddle: https://jsfiddle.net/z5dcnrwa/

score 3 · Answer 2 · answered Sep 27 '17 at 19:17

3

you can use css transform to do that

h1{
    transform: rotate(-18deg);
    transform-origin: top left;
}

answered Sep 27 '17 at 19:17

Frederick Rosales

189
1
4

score 2 · Answer 3 · answered Sep 27 '17 at 19:15

You are looking for the CSS3 transform Property. In your case, it would look something like this:

<h1 style="position: absolute; color: #fdd2e9; margin-left: 127px; margin-top: 191px; -ms-transform: rotate(-7deg); -webkit-transform: rotate(-7deg); transform: rotate(-7deg);"><b>#GIRLBOSSES</b></h1>

The operative styles are:

-ms-transform: rotate(-7deg); /* IE 9 */
-webkit-transform: rotate(-7deg); /* Chrome, Safari, Opera */
transform: rotate(-7deg);

john c. j. · Accepted Answer · 2017-09-27T19:30:06.783

2

Test live

h1 {
    -ms-transform: rotate(-9deg); /* IE 9 */
    -webkit-transform: rotate(-9deg); /* Chrome, Safari, Opera */
    transform: rotate(-9deg);
}

Edit: In the title of the post you asked about vertical text. For vertical, set it to -90.

edited Sep 27 '17 at 19:30

answered Sep 27 '17 at 19:15

john c. j.

725
5
28
81

score 2 · Answer 5 · answered Sep 27 '17 at 19:15

Do you want something like this?

.tilted {
  position: absolute;
  color: #fdd2e9;
  left: 50%;
  top: 10%;
  font-size:50px;
  -webkit-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  transform: rotate(-8deg);
}

.wrap {
  position: relative;
  display: inline-block;
}

<div class="wrap">
  <img src="http://lorempixel.com/400/200/" />
  <h1 class="tilted"><b>#GIRLBOSSES</b></h1>
</div>

How to rotate some text in html css?

5 Answers5