Как создать эту 3d-ротацию в jQuery? Это возможно?

Question

Я сделал пример во Flash, но возможно ли это с помощью jQuery? Я знаю, что это возможно, но с css3, но я хочу, чтобы поддержка Internet Explorer.

Невозможно найти правильный плагин 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]--> 

Вышеуказанные комки IE9 и все версии ниже в той же группе, и одушевляет .stackoverflow изображение с помощью JQuery/JavaScript.