다양한 브라우저에서 CSS를 사용하여 텍스트를 수직으로 회전하는 방법은 무엇입니까?

CSS를 사용하여 텍스트를 수직으로 회전

브라우저 간 수직 텍스트 회전을 달성하려면 브라우저별 솔루션이 필요합니다. CSS3 변환을 지원하는 브라우저의 경우,rotate()를 사용할 수 있습니다.

CSS3 Transform:

.rotate {
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

이 코드는 텍스트를 시계 반대 방향으로 90도 회전하고 회전을 고정합니다. 텍스트 중앙으로 이동합니다.

필터링 대상 IE:

IE 버전 5.5 이상의 경우 필터 속성을 사용할 수 있습니다.

.rotate {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

rotation=3 값은 텍스트를 시계 반대 방향으로 270도 회전합니다.

moz-변환 Firefox:

Firefox 3.5 이상의 경우 -moz-transform이 사용됩니다.

.rot-neg-90 {
  -moz-transform: rotate(270deg);
  -moz-transform-origin: 50% 50%;
}

-Safari/Webkit의 경우-webkit-transform:

Safari 및 Webkit 브라우저의 경우 -webkit-transform은 사용:

.rot-neg-90 {
  -webkit-transform: rotate(270deg);
  -webkit-transform-origin: 50% 50%;
}

브라우저 지원:

이러한 솔루션은 IE6, Firefox 2, Chrome, Safari 및 Opera에서 세로 텍스트 회전에 대한 브라우저 간 지원을 제공합니다.

위 내용은 다양한 브라우저에서 CSS를 사용하여 텍스트를 수직으로 회전하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!