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; } 
- 1Possible duplicate of How do i rotate text in cssRob– Rob2017-09-27 19:20:19 +00:00Commented Sep 27, 2017 at 19:20
Add a comment |
5 Answers
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/
Comments
you can use css transform to do that
h1{ transform: rotate(-18deg); transform-origin: top left; } 
Comments
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.
Comments
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); 
Comments
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>