How to rotate some text in html css? - html

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

Answer 1

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/

Answer 2

you can use css transform to do that
h1{
transform: rotate(-18deg);
transform-origin: top left;
}

Answer 3

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.

Answer 4

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

Answer 5

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>