CSS3 변환 사용 : IE 원본에서 회전 문제

새로운 CSS3 transform:rotate(180deg) 기능을 사용하는 프로젝트에서 작업하고 있습니다. 모든 최신 브라우저에는 자체 태그가 있지만이를 지원합니다. IE (물론)는 그렇지 않습니다. 그러나 필터를 사용하면 동일한 결과를 얻을 수 있습니다. 그 유일한 문제는 IE가 CSS3에서와 같이 또 다른 원점을 사용한다는 것입니다. 제 추측에 의하면 일부 수학에서는 원점을 중심으로 만들 수 있지만, 저는 그것을 얻지 못합니다 (수학은 이전과 다릅니다).CSS3 변환 사용 : IE 원본에서 회전 문제

코드와 예제는 http://jsbin.com/adiwa3/2입니다. URL 뒤에 /edit을 추가하면 테스트를 위해 편집기가 열립니다. IE에서 문제를 확인하고 다른 현대적인 브라우저에서 필요한 결과를 확인하십시오.

li의 숫자가 변경 될 수 있으므로 현재 문제를 수정하는 부분은 if(i==#){...}이며 일부 수학으로 변경해야합니다.

누군가가이 문제를 해결할 수 있기를 바랍니다. 너.

출처

2010-04-01 jerone

좋아, 해결책을 찾았습니다. 나는 왼쪽 위치에 대해 costheta를 사용하고 최상위 위치에 대해 sintheta를 사용하고 너비 거리를 곱해야했습니다. 높이와 너비를 2로 나눈 값을 합산하면 올바른 값을 얻을 수 있습니다.

that.css({ 
    left: (cos * dis/2) - (parseInt(that.width())/2), 
    top: (sin * dis/2) - (parseInt(that.height())/2) 
});

당신은 내가 IE에서 자바 스크립트를 실행하는 기능없이 동일한 문제를 가지고 여기에 작업 코드 http://jsbin.com/adiwa3/53 여기에 동작하는 예제 http://jeroenvanwarmerdam.nl/contact.aspx

출처

2010-04-02 14:17:21 jerone

크로스 브라우저 변환 http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/에 대해이 프로젝트를 발견했습니다. IE에서 동작하는 방식을 이해하기 위해 코드를 분석해보십시오 (또는 직접 스크립트를 다운로드하십시오 :)).

출처

2010-04-01 16:06:03 mck89

고마워요, 제가 살펴 보겠습니다. – jerone

좋아, 그것은 내가 찾고 있던 것보다 약간 컸다. 많은 시행 착오 끝에 나는 내 자신의 해결책을 찾았다. 타이 – jerone

을 찾을 수 있습니다. Here is 해결책을 찾았습니다.

출처

2012-08-22 12:16:22 idanzalz

CSS3 변환 사용 : IE 원본에서 회전 문제

답변

관련 문제