jQuery에서이 3D 회전을 만드는 방법은 무엇입니까? 이것이 가능한가?

Question

플래시에서 예제를 만들었지 만 jQuery에서이 방법을 사용할 수 있습니까? 나는 가능하지만 css3으로 알고 있지만 인터넷 익스플로러 지원을 원한다.

올바른 jquery 플러그인을 찾을 수 없습니다.

아무도 도와 줄 수 있습니까? 감사.

http://philiphannaart.nl/rotate/test.html

Answer 1

이 특정 애니메이션은 모든 최신 브라우저, including Internet Explorer이 그것을 처리 할 수있을만큼 간단합니다. 기본적으로, 당신은 시간이 지남에 따라 요소에 rotatex 값을 수정하고 있습니다 :

.stackoverflow { 
    perspective: 500px; 
    transform: rotateX(90deg); 
    transform-origin: 50% 100%; 
    animation: standup 1s forwards; 
} 

@keyframes standup { 
    to { transform: rotateX(0); } 
} 

데모 : http://codepen.io/anon/pen/KbIGa

perspective property 이미지의 깊이를 제공 할 것입니다. 이것은 IE10 +에서 작동합니다. Internet Explorer 9은 -ms- 접두사가 필요합니다 (또는 prefixfree 사용). 같은 그룹에 위의 덩어리 IE9와 모든 버전의 아래

<!--[if lte IE 9]> 
    <script> 
     $(function() { 
      $(".stackoverflow").animate({ height: "128px" }, 1000); 
     }); 
    </script> 
<![endif]--> 

, 그리고 jQuery를/자바 스크립트를 통해 .stackoverflow 이미지를 애니메이션을 이전 IE9에 당신은 단순히 잠재적 인 대체로서 이미지의 높이에 애니메이션을 적용 할 수 있습니다.