>웹 프론트엔드 >CSS 튜토리얼 >브라우저 간 호환성을 사용하여 텍스트를 수직으로 회전하려면 어떻게 해야 합니까?

브라우저 간 호환성을 사용하여 텍스트를 수직으로 회전하려면 어떻게 해야 합니까?

Linda Hamilton
Linda Hamilton원래의
2024-12-09 22:44:11983검색

How Can I Vertically Rotate Text with Cross-Browser Compatibility?

크로스 브라우저 지원으로 텍스트를 세로로 회전

한 단어를 세로로 표시해야 합니까? 이는 CSS를 사용하여 달성할 수 있으며 IE6, Firefox 2 및 Chrome과 같은 주요 브라우저 간의 호환성을 보장합니다.

해결책:

CSS를 사용하여 텍스트를 90도 회전하려면, 다음 단계를 따르세요.

  1. 원하는 CSS로 클래스를 정의하세요. 변환:
.rotate {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);

  transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
}
  1. 원하는 텍스트에 클래스 적용:
<span>

이전 브라우저의 경우:

이전 브라우저에서는 행렬에 다음 코드를 사용할 수 있습니다. 변환:

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

Firefox 3.5 및 Safari/WebKit 3.1에서 텍스트를 -90도 회전합니다. IE는 매트릭스 지원이 제한되어 있지만 구현하기가 더 복잡합니다.

위 내용은 브라우저 간 호환성을 사용하여 텍스트를 수직으로 회전하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.