IE9中具有背景图像的html div翻转效果

Question

我正在开发一个功能，其中我是翻转一个div与背景图像。当我翻转div时，另一边应该有一个新的图像。

我尝试了以下jquery插件，结果如下：

1. 它在IE10，chrome和火狐中工作得很好，但是它在IE9中不能正常工作--它使图像消失，并翻转灰色的div。
2. 翻转！：它使图像消失，并翻转灰色的div。
3. 图像翻转: 2D翻转
4. 快速翻转: 2D翻转
5. rotate3di: 3d翻转，但它似乎是从一定的角度来看。

请建议一种在IE9中翻转div的方法。如有任何帮助，将不胜感激。

Answer 1

CSS转换是代码不能在IE9中工作的原因。CSS转换用于通过更改CSS (不需要JavaScript )来激活对象。jQuery.flippy.js使用它来动画对象。遗憾的是，CSS转换是在IE9之后出现的，因此在它中不支持CSS转换。

我在过去经历过类似的问题(http://bitotsav.in/#!/shows)，我选择为IE9和更低的版本提供一些琐碎的动画。

但是，如果您想在IE9上拥有翻转动画，那么请访问非webkit浏览器的翻转卡效果

上面的链接可能包含对您的问题的一些解决方案。

Answer 2

对于FF和Chrome，我在这里摆弄：

http://jsfiddle.net/RXU84/

但是，我无法在IE上测试它，因为我现在没有访问权限。

多亏了这家伙..。大卫

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
        <div class="front">
            <!-- front content -->
            <img src="http://i.imgur.com/FrJqOAP.jpg"/>
        </div>
        <div class="back">
            <!-- back content -->
            <img src="http://i.imgur.com/eIkgvPL.jpg"/>
        </div>
    </div>
</div>

CSS

        /* simple */
    .flip-container {
        -webkit-perspective: 1000;
        -moz-perspective: 1000;
        perspective: 1000;

        border: 1px solid #ccc;
    }


        .flip-container:hover .flipper, 
                    .flip-container.hover .flipper, #flip-toggle.flip .flipper {
            -webkit-transform: rotateY(180deg);
            -moz-transform: rotateY(180deg);
            transform: rotateY(180deg);
            filter: FlipH;
            -ms-filter: "FlipH";
        }

    .flip-container, .front, .back {
        width: 320px;
        height: 427px;
    }

    .flipper {
        -webkit-transition: 0.6s;
        -webkit-transform-style: preserve-3d;

        -moz-transition: 0.6s;
        -moz-transform-style: preserve-3d;

        transition: 0.6s;
        transform-style: preserve-3d;

        position: relative;
    }

    .front, .back {
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        backface-visibility: hidden;

        position: absolute;
        top: 0;
        left: 0;
    }

    .front {
        background: lightgreen;
        z-index: 2;
    }

    .back {
        background: lightblue;
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }

    .front .name {
        font-size: 2em;
        display: inline-block;
        background: rgba(33, 33, 33, 0.9);
        color: #f8f8f8;
        font-family: Courier;
        padding: 5px 10px;
        border-radius: 5px;
        bottom: 60px;
        left: 25%;
        position: absolute;
        text-shadow: 0.1em 0.1em 0.05em #333;

        -webkit-transform: rotate(-20deg);
        -moz-transform: rotate(-20deg);
        transform: rotate(-20deg);
    }

Answer 3

我想这就是你需要看到的演示：翻转圆幻灯片

它的翻转不仅仅是图像，更容易遵循代码，你可以定制它，这样你就有了你需要的东西。

希望这能帮上忙。