3

我正在开发一个功能，我正在用背景图像翻转一个 div。当我翻转 div 时，另一侧应该有一个新图像。

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

  1. Flippy：它在 IE10、chrome 和 firefox 中运行良好，但在 IE9 中无法正常运行它使图像消失并翻转灰色 div。

  2. 翻转！：它使图像消失并翻转灰色 div。

  3. 图像翻转：2D翻转

  4. 快速翻转：2D翻转

  5. rotate3di：3d 翻转，但看起来我们是从某个角度观看的。

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

4

5 回答 5

3

CSS 过渡是您的代码无法在 IE9 中运行的原因。CSS 过渡用于通过更改 CSS 来为对象设置动画（不需要 JavaScript）。jQuery.flippy.js 使用它来动画对象。遗憾的是，CSS 过渡是在 IE9 之后出现的，因此它不支持 CSS 过渡。

我过去曾遇到过类似的问题（http://bitotsav.in/#!/shows），我选择为 IE9 及以下版本提供一些微不足道的动画。

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

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

于 2013-09-10T21:15:01.640 回答
0

对于 FF 和 Chrome，我在这里摆弄了一下：http:
//jsfiddle.net/RXU84/

但是，我无法在 IE 上测试它，因为我现在无法访问。
感谢这里的这个人..大卫

HTML

<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);
    }
于 2013-09-16T21:34:43.463 回答
0

编辑： 这在 IE9 中有效，IE 只是讨厌 jsfiddle 并拒绝使其工作。换句话说，IE的死亡！

我建议使用画布！如果您的画布是 100x100 并且您在画布上加载 100x200 的图片，则一半将在外面。当您翻转图像时，另一部分将显示（尽管它会被翻转，因此必须翻转原始图像）。

http://jsfiddle.net/H82Tq/1/

var c = document.getElementById("joker");
var ctx = c.getContext("2d");
var img = document.createElement('img');
img.src = 'http://i.istockimg.com/file_thumbview_approve/7625283/2/stock-illustration-7625283-joker-face-two-playing-card.jpg';


var b = false;
$(c).click(function(){
    if (b) {
        ctx.drawImage(img, -246, 0, 246, 380);
    } else {
        ctx.drawImage(img, 0, 0, 246, 380);
    }

    b = !b;
    ctx.scale(-1, 1);
}).click();
于 2013-09-17T10:40:36.037 回答
0

我认为这就是您需要查看此演示的内容：翻转圆幻灯片

它翻转的不仅仅是图像，易于遵循的代码，您可以对其进行自定义，以便您拥有所需的东西。

希望这会有所帮助。

于 2013-09-17T01:15:49.987 回答
0

尝试这个...

  #skew {

变换：倾斜（35度）；}

#scale {

变换：比例（1,0.5）；}

#rotate {

变换：旋转（45度）；}

#translate {

变换：翻译（10px，20px）；}

#rotate-skew-scale-translate {

变换：倾斜（30 度）缩放（1.1,1.1）旋转（40 度）平移（10 像素，20 像素）；}

于 2013-09-17T05:30:14.050 回答