Javascript 如何将css3翻转动画转换为ie9

我请求为我的web应用程序制作

fllip

动画。问题是我需要包括

ie9

我是为现代浏览器做的，但是我被

ie9

绊倒了

任何人都可以在

ie9

我已经有了modernizer，所以使用它我可以正确地找到浏览器

请我寻找简单的方法。请尽可能避免使用插件

以下是我现有的代码：

HTML:

<div class="container">
    <div class="box-front">Front :)</div>
    <div class="box-back">Back :D </div>   
</div>

---

我希望在提交答案之前可以发表评论，但我的分数还不够。你能用图像作为翻转元素吗？我使用jQuery提出了稍微不同的方法

请检查

我不知道这是否是你需要的

<div class="container">
   <img src="http://placehold.it/350x150" width="60%" max-width: "100%" alt="HTML">
</div>

.box-back {
  position: relative;
  top: 30px;
  background-color:#f35958;
  width: 100%;
  height: 100%;
}

---

始终将前缀放在顶部，标准化版本放在末尾。问候语！我不认为在IE9中不使用插件就可以实现这一点。有一个jQuery插件，如果你有兴趣，我可以帮你做一个演示。@Harry谢谢你的建议，基本上我需要避免js在站点中大量转储。正如你目前所说的，我发现这个

http://lab.smashup.it/flip/

如果您的建议比这更好。。请让我知道。@3gwebtrain:我正在寻找插件伴侣，但你找到的那个看起来也很合适：）

<div class="container">
   <img src="http://placehold.it/350x150" width="60%" max-width: "100%" alt="HTML">
</div>

.box-back {
  position: relative;
  top: 30px;
  background-color:#f35958;
  width: 100%;
  height: 100%;
}

$(document).ready(function () {


$('.container').css({
    'perspective': '0',
        'perspective-origin': '50% 50%'
});
var compLogo = $('img[alt~="HTML"]');
compLogo.hover(function () {
    $({
        rotateVar: 0
    }).animate({
        rotateVar: 180
    }, {
        duration: 2000,
        easing: 'linear', //easeOutElastic
        step: function (now, abc) {
            compLogo.css('transform', 'rotateY(' + now + 'deg)');
        }
    })
}, function () {
    $({
        rotateVar: 0
    }).animate({
        rotateVar: 0
    }, {
        duration: 2000,
        easing: 'linear',
        step: function (now, abc) {
            compLogo.css('transform', 'rotateY(' + now + 'deg)');
        }
    })
  });
});