如何在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图像。