如何获得CSS3翻转动画到IE9

how to get css3 flip animation to ie9

本文关键字：IE9 动画翻转何获得 CSS3 更新时间：2023-09-26

我请求为我的 Web 应用程序制作fllip动画。问题是我需要包含ie9。

我为现代浏览器做了，但我被ie9困住了.

任何人都能找到最好的选择来做到这一点ie9

我已经有了现代化器，所以使用它我可以正确找到浏览器。

请我正在寻找简单的方法。请尽量避免插件。

这是我现有的代码：

.HTML：

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

.CSS：

.container{
    margin:30px auto;
    /* How pronounced should the 3D effects be */
    perspective: 500;
    -webkit-perspective: 500;
    -moz-perspective: 500;
    -ms-perspective: 500;
    -o-perspective: 500;
    width:150px;
    height:150px;
    position:relative;
    /*Some UI */
    border-radius:6px;
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    -ms-border-radius:6px;
    -o-border-radius:6px;
    font-size:28px;
    line-height:150px;
    vertical-align:middle;
    cursor:pointer;
}
.box-front,.box-back{
        /* Enable 3D transforms */
        transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        transform-style: preserve-3d;
         backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        -o-backface-visibility: hidden;
         width:100%;
        height:100%;
        position:absolute;
        background-color:#0090d9;
        /* Animate the transitions */
        -webkit-transition:0.8s; text-align:center;
        -moz-transition:0.8s; text-align:center;
        -ms-transition:0.8s; text-align:center;
        -o-transition:0.8s; text-align:center;
        transition:0.8s; text-align:center;
        color:#FFF;
        border-radius:6px;
        -webkit-border-radius:6px;
        -moz-border-radius:6px;
        -ms-border-radius:6px;
        -o-border-radius:6px;
        }
.box-back{
        /* The back side is flipped 180 deg by default */
        transform:rotateY(180deg);
        -webkit-transform:rotateY(180deg);
        -moz-transform:rotateY(180deg);
        -ms-transform:rotateY(180deg);
        -o-transform:rotateY(180deg);
        background-color:#f35958;
        }
.container:hover .box-front{
        /* When the container is hovered, flip the front side and hide it .. */
        transform:rotateY(180deg);
        -webkit-transform:rotateY(180deg);
        -moz-transform:rotateY(180deg);
        -ms-transform:rotateY(180deg);
        -o-transform:rotateY(180deg);
        }
.container:hover .box-back{
        /* .. at the same time flip the back side into visibility */
        transform:rotateY(360deg);
        -webkit-transform:rotateY(360deg);
        -moz-transform:rotateY(360deg);
        -ms-transform:rotateY(360deg);
        -o-transform:rotateY(360deg);
        }

现场演示

我希望

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

请检查 JSFIDDLE

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

<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%;
}

jQuery

$(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)');
        }
    })
  });
});