Internet Explorer에서 특정 각도로 DIV 요소를 회전하는 방법은 무엇입니까?

IE에서 CSS 회전 속성을 사용하여 DIV 회전

CSS 회전 속성은 웹페이지의 요소를 변환하는 강력한 도구입니다. 그러나 IE 사용자는 특정 각도로 요소를 회전하려고 할 때 문제가 발생할 수 있습니다.

문제

문제를 설명하려면 다음 스타일을 고려하십시오.

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

이 스타일은 DIV를 90, 180, 270 또는 360도로 회전합니다. 그러나 목표가 DIV를 20도만 회전시키는 것이라면 이 접근 방식은 효과적이지 않습니다.

해결책

IE에서 요소를 특정 각도만큼 회전하려면 다음 코드가 필요합니다.

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */

IE8의 코드는 IE6/7의 코드와 다릅니다. 모든 IE 버전을 지원하려면 두 줄의 코드가 모두 필요합니다.

코드의 숫자는 도가 아닌 라디안을 나타냅니다. 따라서 원하는 회전을 달성하려면 원하는 각도를 라디안으로 변환해야 할 수도 있습니다.

기타 브라우저 호환성

IE9 및 IE10을 포함한 다른 모든 최신 브라우저는 CSS3 변환 스타일을 지원합니다. 이렇게 하면 다음 코드를 사용하여 요소를 회전할 수 있습니다.

-moz-transform: rotate(45deg); /* FF3.5/3.6 */
-o-transform: rotate(45deg); /* Opera 10.5 */
-webkit-transform: rotate(45deg); /* Saf3.1+ */
transform: rotate(45deg); /* Newer browsers (incl IE9) */

추가 고려 사항

• IE6/7 구문은 잘못된 CSS 문자로 인해 다른 브라우저에서 문제를 일으킬 수 있습니다. 이 문제를 방지하려면 특정 IE 스타일을 별도의 스타일시트에 배치할 수 있습니다.
• CSS Sandpaper는 이전 IE 버전에서도 회전을 위한 표준 CSS 코드를 사용할 수 있게 해주는 JavaScript 라이브러리입니다.
• IE9에는 표준 변환과 -ms-filter 스타일을 모두 사용하면 렌더링 문제가 발생할 수 있는 특이한 점이 있습니다. 이를 방지하려면 CSS Sandpaper 폴리필을 대신 사용하는 것이 좋습니다.

위 내용은 Internet Explorer에서 특정 각도로 DIV 요소를 회전하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!