Flipping effect for html div with background images in IE9

Question

I am developing a functionality where I am flipping a div with background image. When I flip the div there should be a new image on other side.

I have tried following jquery plugin and the results are:

Flippy: It is working very fine in IE10, chrome and firefox but it is not working in IE9 correctly It makes image to disappear and flips gray colored div.
Flip!: It makes image to disappear and flips gray colored div.
image flip: 2D flip
Quick flip: 2D flip
rotate3di: 3d flip but it appears like we are viewing from certain angle.

Please suggest a way for flipping a div in IE9. Any help will be appreciated

Please make a fiddle and show your code :) – Vikas Ghodke Aug 27 '13 at 04:42 — Vikas Ghodke, Aug 27 '13 at 04:42
I have added code on http://jsfiddle.net/Akshay2409/r5xMC/ – AkshayP Aug 27 '13 at 05:52 — AkshayP, Aug 27 '13 at 05:52
@AkshayP did you add excanvas.js file.? – Vivek Vikranth Aug 27 '13 at 06:34 — Vivek Vikranth, Aug 27 '13 at 06:34
yes..I tried excanvas.js also.. but same problem persists – AkshayP Aug 28 '13 at 09:12 — AkshayP, Aug 28 '13 at 09:12

score 3 · Answer 1 · edited May 23 '17 at 10:26

CSS transitions is the reason why your code is not working in IE9. CSS transition is used to animate object by changing CSS (no JavaScript required). jQuery.flippy.js uses this to animate object. Sadly CSS transitions came after IE9 and so there is no support for CSS transition in it.

I have been through similar problem in past (http://bitotsav.in/#!/shows) and I choose to give somewhat trivial animation for IE9 and below.

However if you want to have flip animation on IE9 then visit Flip card effect for non-webkit browsers

The link above may contain some solution to your problem.

score 0 · Answer 2 · answered Sep 16 '13 at 21:34

For FF and Chrome, I fiddled here:
http://jsfiddle.net/RXU84/

However, I could not test it on IE, as I don't have access to right now.
Thanks to this guy here.. David

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

score 0 · Answer 3 · answered Sep 17 '13 at 01:15

0

i think this is what you need see this demo : FLIPPING CIRCLE SLIDESHOW

it's flipping with more than image,easy code to follow and you can customize it so you have what you need.

hope this will help.

answered Sep 17 '13 at 01:15

AhmedBinNasser

2,735
1
24
24

Re your (now deleted) meta question: a warning of some sort is being discussed and will probably be implemented at some point – Richard Tingle Jan 23 '14 at 09:11
I found the link to [the of the developers planning this](http://meta.stackexchange.com/a/211307/220332) – Richard Tingle Jan 23 '14 at 09:19

score 0 · Answer 4 · answered Sep 17 '13 at 05:30

try this...

  #skew {

transform:skew(35deg); }

#scale {

transform:scale(1,0.5); }

#rotate {

transform:rotate(45deg); }

#translate {

transform:translate(10px, 20px); }

#rotate-skew-scale-translate {

transform:skew(30deg) scale(1.1,1.1) rotate(40deg) translate(10px, 20px); }

Camathon · Answer 5 · 2013-09-17T11:24:35.173

Edit: This DOES work in IE9, IE just simply hates jsfiddle and refuses to make it work. In other words, death to IE!

I would recommend using canvas! If you canvas is 100x100 and you load a picture on the canvas that is 100x200 half will be outside. When you flip the image the other part will show (though it'll be flipped, so the original image would have to be flipped).

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();

Flipping effect for html div with background images in IE9

5 Answers5