CSS3 변환을 사용하여 IE9에서 요소를 회전하는 방법은 무엇입니까?

IE9의 CSS3 변형: 회전

이 글은 IE9의 요소 회전 문제를 해결하는 것을 목표로 합니다.

질문

디자인에는 수직적인 요소가 필요합니다. CSS는 IE9를 제외한 모든 브라우저에서 잘 작동합니다. 우리는 IE7과 IE8에서 필터 속성을 사용했습니다:

progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

그러나 이로 인해 IE9에서는 요소가 투명해졌고 CSS3 "변환" 속성은 아무런 효과가 없는 것 같았습니다!

답변

표준 CSS3 순환은 IE9에서 작동해야 하지만 다음과 같이 공급업체 접두사를 추가해야 한다고 생각합니다.

-ms-transform: rotate(10deg);

베타 버전에서는 사용하지 못할 수 있으며, 그렇지 않은 경우 베타 버전보다 최신 버전인 현재 미리보기 버전(Preview 7)을 다운로드해 보세요. 베타 버전이 없기 때문에 해당 버전에 있는지 확인할 수 없습니다. 최종 버전에서는 확실히 이를 지원할 계획입니다.

IE9에서는 IE 전용 필터 속성이 제거된 것도 확인할 수 있습니다.

추가 문서

매우 제한적이라고 알려져 있지만 모든 브라우저에 유용한 http://css3please.com/ 페이지를 찾았습니다. 브라우저에서 다양한 CSS3 기능을 테스트합니다.

그러나 IE9 미리보기에서 이 페이지의 회전 기능을 테스트하면 심각한 충돌이 발생합니다.

그러나 우리는 자체 테스트 페이지에서 IE9의 -ms-transform:rotate()를 독립적으로 테스트했으며 정상적으로 작동했습니다. 따라서 우리의 결론은 기능이 구현되었지만 아마도 동적 설정과 관련된 일부 버그가 있다는 것입니다.

어떤 브라우저가 www.canIuse.com에 어떤 기능이 구현되어 있는지 결정하는 데 유용한 또 다른 참조 지점입니다. http://caniuse.com/#search=rotation

을 참조하세요. 업데이트

문제와 관련이 있고 작업을 더 간단하게 만들 수 있는 CSS Sandpaper라는 해킹에 대해 최근에 알게 되었기 때문에 이 오래된 답변을 다시 게시합니다.

이 해킹은 이전 버전의 IE에서 표준 CSS 변환에 대한 지원을 구현합니다. 이제 CSS에 다음을 추가할 수 있습니다:

-sand-transform: rotate(10deg);

... 필터 구문을 사용하지 않고도 IE 6/7/8에서 작동하도록 할 수 있습니다. (물론 내부적으로는 여전히 필터 구문을 사용하지만 다른 브라우저 구문과 유사한 구문을 사용하면 더 쉬워집니다.)

위 내용은 CSS3 변환을 사용하여 IE9에서 요소를 회전하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!