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

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

한 단어를 세로로 표시해야 합니까? 이는 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%;
}

2. 원하는 텍스트에 클래스 적용:

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!