IE에서 javascript CSS 변환을 사용하여 이미지 회전하기

png 이미지 (일부 서클 디스크)를 회전해야합니다. 그것은 jQuery를 일부 도움으로 이루어집니다 : IE <의 모든 버전에서IE에서 javascript CSS 변환을 사용하여 이미지 회전하기

$.fn.rleft = function() { 
    return this.animate({ 
     rotate: '-=45deg' 
    }); 
};

9 일이 정말 잘못. 회전 애니메이션은 엉터리이며, 회전 한 후에 이미지의 알파 투명도와 함께 매우 추악한 현상이 발생합니다.

IE 8 및 7 (및 더 많거나 적은 IE 6?)에서이 작업을 수행 할 수 있습니까? 그렇지 않다면 나는 플래시로 주문하도록 강요받을 것이다. 하지만 먼저 CSS와 자바 스크립트 (svg?)를 사용하여이 작업을 수행하려고합니다. 다른 기술이나 js 라이브러리를 사용하기위한 조언이 있습니까?

미리 답변 해 주셔서 감사합니다.

편집 : 실제로 CSS와 JS를 사용하여 IE에서 PNG 이미지를 회전시키는 솔루션을 찾지 못했습니다. 최종 결과 라파엘으로 수행 : http://ipm-profil.de/diversity/ 내가 GIF 이미지 및 SVG와 그 원의 마스크 "거친 가장자리를"사용 (라파엘, 상기, 모든 심지어 IE에 아주 좋은 작동 라파엘, 6

EDIT2 사용하여 재실행을했다 암호).

출처

2011-01-09 Ernest

나는 IE8에서 사이트를 테스트했고 모든 것이 불투명도로 멋지게 보였다. – Chandu

@Cybernate : 매우 이상하다. 나는 몇 대의 컴퓨터에서 그것을 테스트했다. 참조 이미지로 질문을 업데이트했습니다. – Ernest

이전에는 IE8에서 검은 색 테두리를 알지 못했습니다. 예, 맞습니다. IE8은 그 왜곡을 보여줍니다. – Chandu

이 경우 Raphaël—JavaScript Library을 사용하는 것이 좋습니다. Raphaël은 현재 Firefox 3.0 이상, Safari 3.0 이상, Chrome 5.0 이상, Opera 9.5 이상 및 Internet Explorer 6.0 이상을 지원하며 사용하기가 쉽고 JQuery에서도 잘 작동합니다.

출처

2011-01-09 20:52:25

고마워, 나는 그것을 점검 할 것이다. – Ernest

SVG에서 그럴 가치가 있습니다. IE9를 포함한 모든 브라우저에서 작동합니다. IE < 9의 경우 SVGWeb을 사용할 수 있습니다. SVG를 지원하지 않는 브라우저에서 SVG를 작동시키는 플래시 심입니다. 이전 버전의 브라우저가 볼 수 있다면 당신은 상관하지 않는 경우

출처

2011-01-09 21:13:23

또한 흥미로 웠습니다 (SVGWeb), 감사합니다. – Ernest

는 IE 9는 transform 속성 추가 있습니다

-webkit-transform: rotate(15deg) /* for Safari/Chrome */ 
-moz-transform: rotate(15deg) /* for Firfox */ 
-ms-transform: rotate(15deg)  /* for hated IE */ 
transform: rotate(15deg)   /* The way it should be. */

을 그리고 나는 JS이 게시물의 하단에 http://www.zachstronaut.com/posts/2009/02/17/animate-css-transforms-firefox-webkit.html에 좋은 JS를 발견했다.

출처

2011-03-16 17:24:02 webLacky3rdClass

실제로 그들은 IE 6+에 대한 지원이 필요했습니다. 그리고 이전에 Raphaël 언급, 내가 그렇게 할 수있었습니다. 답변을 주셔서 감사합니다. – Ernest

IE에서 javascript CSS 변환을 사용하여 이미지 회전하기

답변

관련 문제