如何在jQuery中創建這個3d旋轉？這可能嗎？

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和所有版本以下爲同一組，並通過jQuery/JavaScript的動畫的圖像.stackoverflow。