정렬을 손상시키지 않고 CSS에서 텍스트를 회전하는 방법은 무엇입니까?

정렬된 회전을 얻기 위해 CSS에서 텍스트를 회전하는 방법

CSS에서 텍스트를 회전하면 웹 디자인에 동적 요소가 추가되지만 때로는 정렬 문제에. 이러한 문제를 해결하고 원하는 회전을 달성하는 방법은 다음과 같습니다.

제공된 HTML 코드와 같이 HTML에서 중첩 요소 내에 텍스트를 설정합니다.

<code class="css">.mainWrapper{margin:0 auto; width:960px; background:#EFEFEF;}
.rotateObj{position:relative; height:400px;}
.rotateObj .title{
    float:left;
    background:gray;
    width:50px;
    height:100%;
    
    /** Rounded Border */ 
    border-radius:5px;-moz-border-radius:5px;
    
    /** Rotation */
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg);    
    transform:rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.rotateObj .active{background:green;}
.rotateObj .content{float:left;width:600px;height:100%;padding:20px;}
.hide{display:none;}</code>

위의 CSS는 ".title" 클래스 요소를 "transform:rotate(-90deg)" 속성을 사용하여 시계 반대 방향으로 90도.

그러나 회전으로 인해 텍스트 정렬이 깨집니다. 이 문제를 해결하려면 "writing-mode: Vertical-rl;" 속성은 "변형" 속성 바로 뒤에 추가할 수 있습니다.

<code class="css">writing-mode: vertical-rl;</code>

이 속성은 텍스트 방향을 세로로 변경하여 회전 후 올바른 정렬을 보장합니다.

또는 텍스트를 수직으로 정렬하려는 경우 가로로 유지하려면 "letter-spacing" 속성을 사용하여 문자 사이의 간격을 조정할 수 있습니다. 예를 들어, 이 값을 큰 값으로 설정하면 가로 정렬을 유지하면서 회전하는 듯한 느낌을 줄 수 있습니다.

<code class="css">letter-spacing: 10px;</code>

이러한 고려 사항을 고려하고 적절한 CSS 속성을 사용하면 CSS에서 텍스트를 효과적으로 회전할 수 있습니다. 정렬이 손상되었습니다.

위 내용은 정렬을 손상시키지 않고 CSS에서 텍스트를 회전하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!