HTML CSS에서 일부 텍스트를 회전하는 방법?

-3

나는 이런 식으로하고 싶다. HTML CSS에서 일부 텍스트를 회전하는 방법?

나는 css의 속성을 사용해야한다는 것을 알고 있습니다. 내 코드는 다음과 같습니다

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

CSS :

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

출처

2017-09-27 Learner

가능한 중복 https://stackoverflow.com/questions/ 그 6028128/how-do-i-rotate-text-in-css) – Rob

Test live

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

편집 : 게시물의 제목에서 당신은 수직 텍스트에 대해 물었다. 세로의 경우 -90으로 설정합니다.

출처

2017-09-27 19:15:39

당신은 몇 가지 설정이 필요합니다. 브라우저마다 다릅니다. JSfiddle에서

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

봐는 : https://jsfiddle.net/z5dcnrwa/

출처

2017-09-27 19:15:14 Shultc

당신은 CSS3 transform Property 찾고 있습니다. 귀하의 경우, 그것은 다음과 같이 보일 것입니다 :

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

을 수술 스타일은 다음과 같습니다

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

출처

2017-09-27 19:15:17

원하십니까?

.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>

출처

2017-09-27 19:15:57

을하기를 원하십니까 변환 CSS를 사용할 수 있습니다

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

([내가 CSS에서 텍스트를 회전하려면 어떻게]의

출처

2017-09-27 19:17:48

HTML CSS에서 일부 텍스트를 회전하는 방법?

답변

관련 문제