Nice programing

IE의 CSS 회전 속성

nicepro 2020. 10. 22. 22:49
반응형

IE의 CSS 회전 속성


DIV를 어느 정도 회전시키고 싶습니다. FF에서는 작동하지만 IE에서는 문제가 있습니다.

예를 들어 다음 스타일에서 rotation = 1을 4로 설정할 수 있습니다.

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

이것은 DIV가 90도, 180도, 270도 또는 360도 회전된다는 것을 의미합니다. 하지만 DIV를 20 도만 회전해야한다면 더 이상 작동하지 않습니다.

IE에서이 문제를 어떻게 해결할 수 있습니까?


IE에서 45도 회전하려면 스타일 시트에 다음 코드가 필요합니다.

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를 지원하려면 두 줄의 코드를 모두 제공해야합니다.

라디안에는 끔찍한 숫자가 있습니다. 45도 이외의 각도를 사용하려면 그림을 직접 계산해야합니다 ( 찾는 경우 인터넷에 튜토리얼 이 있음 ).

또한 IE6 / 7 구문은 필터 문자열의 이스케이프 처리되지 않은 콜론 기호로 인해 다른 브라우저에서 문제를 일으 킵니다. 이는 잘못된 CSS임을 의미합니다. 내 테스트에서 Firefox는 필터 후의 모든 CSS 코드를 무시합니다. 이것은 당신이 그것에 잡히면 몇 시간 동안 혼란을 일으킬 수 있으므로 당신이 알아야 할 것입니다. 다른 브라우저가로드하지 않은 별도의 스타일 시트에 IE 관련 항목을 포함하여이 문제를 해결했습니다.

다른 모든 현재 브라우저 (IE9 및 IE10 포함-예!)는 CSS3 transform스타일 (종종 공급 업체 접두사 포함)을 지원하므로 다음 코드를 사용하여 다른 모든 브라우저에서 동일한 효과를 얻을 수 있습니다.

-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) */

도움이되기를 바랍니다.

편집하다

이 답변은 여전히 ​​찬성 투표를 받고 있기 때문에 이전 IE 버전에서도 회전에 (거의) 표준 CSS 코드를 사용할 수있는 CSS Sandpaper 라는 JavaScript 라이브러리에 대한 정보로 업데이트해야한다고 생각합니다 .

사이트에 CSS Sandpaper를 추가하면 IE6–8에 대한 다음 CSS 코드를 작성할 수 있습니다.

-sand-transform: rotate(40deg);

filterIE에서 일반적으로 사용 하는 기존 스타일 보다 훨씬 쉽습니다 .

편집하다

또한 표준 transform및 이전 스타일 IE를 모두 지원하는 IE9 (및 IE9 만 해당)의 추가 특성에 유의하십시오 -ms-filter. 둘 다 지정하면 IE9가 완전히 혼란스럽고 요소가 있었던 곳에 단색 블랙 박스 만 렌더링 할 수 있습니다. 이에 대한 가장 좋은 해결책은 filter위에서 언급 한 샌드페이퍼 폴리 필을 사용하여 스타일 을 피하는 것 입니다.


다음과 같이 행렬 변환을 수행해야합니다.

filter: progid:DXImageTransform.Microsoft.Matrix(
  M11 = COS_THETA,
  M12 = -SIN_THETA,
  M21 = SIN_THETA,
  M22 = COS_THETA,
  sizingMethod = 'auto expand'
);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(
  M11 = COS_THETA,
  M12 = -SIN_THETA,
  M21 = SIN_THETA,
  M22 = COS_THETA,
  SizingMethod = 'auto expand'
)";

여기서 COS_THETA 및 SIN_THETA는 각도의 코사인 및 사인 값입니다 (예 0.70710678: 45 °).


IETransformsTranslator라는 온라인 도구가 있습니다. 이 도구를 사용하면 IE6, IE7 및 IE8에서 작동하는 매트릭스 필터 변환을 만들 수 있습니다. CSS3 변환 함수 (예 : rotate (15deg))를 붙여 넣으면 나머지는 수행됩니다. http://www.useragentman.com/IETransformsTranslator/


http://css3please.com/

Microsoft IE9 + 접두사의 경우 '.box_rotate'까지 아래로 스크롤합니다. 비슷한 토론 : jQuery에서 Div 요소 회전


힌트 ... "transform : rotate ()"또는 "-ms-transform : rotate ()"(IE9)를 모바일에 사용하기 전에 두 번 생각하십시오!

나는 며칠 동안 벽을 세게 두드렸다. 이미지를 슬라이드하는 '키네틱'시스템과 그 위에 명령 영역이 있습니다. 나는 화살표 버튼에 "변환"을해서 위아래를 가리키는 것처럼 시뮬레이션했다. 나는 1.000+ 코드 라인을 오랫동안 검토했다 !!! ;-)

일단 CSS에서 transform : rotate를 제거하면 괜찮습니다. IE가 처리하는 방식이 다른 보우 저에 비해 약간 까다 롭습니다.

@Spudley에 대한 훌륭한 대답! 작성해 주셔서 감사합니다!


IE 변환을위한 유용한 링크

이 도구는 Microsoft의 독점적 인 Visual Filters 기술을 사용하여 CSS3 Transform 속성 (거의 모든 최신 브라우저에서 사용)을 동등한 CSS로 변환합니다.


IE11 예제 (브라우저 유형 = Trident 버전 = 7.0)의 경우 :

image.style.transform = "rotate(270deg)";

참고 URL : https://stackoverflow.com/questions/4617220/css-rotate-property-in-ie

반응형