Question

我要求为我的网络应用做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);
        }

Live Demo

Answer 1

我希望在提交答案之前我可以发表评论，但我还没有足够的分数。你能用图像作为翻转元素吗？我想出了一些使用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)');
        }
    })
  });
});

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

1 个答案: