CSS를 사용하여 브라우저 간 수직 텍스트 회전을 어떻게 달성할 수 있습니까?

CSS를 사용한 브라우저 간 세로 텍스트 회전

배경

많은 최신 웹사이트에는 동적 기능이 포함되어 있습니다. 회전된 텍스트를 포함한 콘텐츠. 그러나 여러 브라우저에서 일관된 수직 텍스트를 달성하는 것은 어려운 일이었습니다.

해결책

단어를 90도 회전하려면 '변형' 속성을 활용하세요.

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

브라우저 호환성

이 접근 방식은 주요 브라우저를 지원합니다:

• Chrome(모든 버전)
• Firefox(≥2)
• Safari(≥ 3.1)
• 오페라 (≥5)
• IE (≥9)

참고

IE 9 이전 버전에서는 필터 속성을 적용해야 합니다.

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

Firefox(≥3.5) 및 Webkit(≥3.1)의 경우 다음을 고려하세요. 각각 '-moz-transform' 및 '-webkit-transform'

결론

제공되는 CSS 기술을 사용하면 브라우저 간 세로 텍스트 회전이 가능하므로 효율적인 작업이 가능합니다. 일관된 콘텐츠 표현이 가능합니다.

위 내용은 CSS를 사용하여 브라우저 간 수직 텍스트 회전을 어떻게 달성할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!