CSS flip code won't work in IE11

Question

I am trying to create a flip animation for some images, which when they turn over, display appropriate link text. This works perfectly in all browsers that I have tested, but IE11.

I read that there is a problem with transform-style: preserve-3d; for IE10, but as I am a CSS beginner, I have been unable to figure out a way to correct the coding.

Here is the HTML:

  <div class="flipcontainer">
    <div class="flipscene3D">
        <div class="flip">
            <div>
                <p>
                    <a itemprop="url" href="ARC3RFC.html"><span itemprop="headline">ARC3RFC Essay: Tomb 100, Tomb U-J and Maadi South: Themes from Predynastic Egypt</span></a> - 2013
                </p>
            </div>
            <div>
                <img src="ARC3RFC.jpg" class="flipimg">
            </div>
        </div>
    </div>
</div>

And the CSS:

img.flipimg {
            height: 150px;
            width: 150px;
            /*border-radius*/
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
        }
        .flipcontainer {
            display: block;
            width: 760px;
            height: 700px;
            margin: 30px auto;
        }
        .flipscene3D {
            display: block;
            float: left;
            margin: 10px;
            /*border-radius*/
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            /*perspective*/
            -webkit-perspective: 300px;
            -moz-perspective: 300px;
            -ms-perspective: 300px;
            -o-perspective: 300px;
            perspective: 300px;
        }
        .flip div {
        position: absolute;
        width: 150px;
        height: 150px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        -o-backface-visibility: hidden;
        backface-visibility: hidden;
        z-index: 500
        }
        .flip div:first-child {
            font-size: 12px;
            /*border-radius*/
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            background: #333;
            /*transform*/
            -webkit-transform: rotateX(180deg);
            -moz-transform: rotateX(180deg);
            -ms-transform: rotateX(180deg);
            -o-transform: rotateX(180deg);
            transform: rotateX(180deg);
        }
        .flip div:first-child p {
            color: #FFF;
            text-shadow: 0 0 1px .111;
            padding-top: 10px;
            text-align: center;
        }
        .flip {
            width: 150px;
            height: 150px;
            /*border-radius*/
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            /*box-shadow*/
            -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.3);
            -moz-box-shadow: 0 0 15px rgba(0,0,0,0.3);
            box-shadow: 0 0 15px rgba(0,0,0,0.3);
            /*transform*/
            -webkit-transform: rotateX(0deg);
            -moz-transform: rotateX(0deg);
            -ms-transform: rotateX(0deg);
            -o-transform: rotateX(0deg);
            transform: rotateX(0deg);
            /*transition*/
            -webkit-transition: all 1s ease;
            -moz-transition: all 1s ease;
            -o-transition: all 1s ease;
            transition: all 1s ease;
            /*transform-style*/
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }
        .flipscene3D:hover .flip {
            /*transform*/
            -webkit-transform: rotateX(180deg);
            -moz-transform: rotateX(180deg);
            -ms-transform: rotateX(180deg);
            -o-transform: rotateX(180deg);
            transform: rotateX(180deg);
        }

Unfortunately, I'm not advanced enough with CSS to figure out what changes would make it work in IE. It looks like I would have to change the whole code if I wanted something that did work in IE, but I was hoping not to have to go that far. — kunoichi, Jun 04 '14 at 05:08
please see this link http://stackoverflow.com/questions/13474210/css3-3d-flip-animation-ie10-transform-origin-preserve-3d-workaround and these too http://stackoverflow.com/questions/11400317/backside-visibility-not-working-in-ie10-works-fine-in-webkit — , Jun 04 '14 at 05:23
Thanks, saina. I guess I'll have to change the entire code to one of the others (which I had read, but hadn't helped with a fix). — kunoichi, Jun 04 '14 at 05:27
see this link http://www.dynamicdrive.com/forums/showthread.php?72717-CSS-3D-Flip-doesn-t-work-in-IE10! . sorry, this help you, but definitly will have solution in google :) .. — , Jun 04 '14 at 05:31

score 6 · Answer 1 · answered Jun 04 '14 at 05:35

Have a look at this Flipping animation Demo. I hope it will solve your problem.

Check the DEMO.

Here is the HTML code look like.

<div class="wrapper">
    <div class="front anim">
        Chrome
    </div>
    <div class="back anim"> 
        IE
    </div>
</div>

Here is the CSS code.

.wrapper {
    width: 300px;
    height: 300px;
    margin: auto;
    position: relative;
}

.anim {
    width: 100%;
    height: 100%;
    -o-transition: all .5s;
    -ms-transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
}

.front {
    z-index: 2;
    background: url(http://lorempixel.com/300/300/) no-repeat;
}

.back {
    z-index: 1;
    -webkit-transform: rotateX(-180deg);
    -ms-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);  
    transform: rotateX(-180deg);  
    background: url(http://placehold.it/300x300) no-repeat;
}

.wrapper:hover .front {
    z-index: 1;
    -webkit-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    transform: rotateX(180deg);
}

.wrapper:hover .back {
    z-index: 2;   
    -webkit-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    transform: rotateX(0deg);
}

Thanks very much. I ended up changing the code to another script completely, and it is now working. To see the working code, it is online temporarily at http://www.thekeep.org/~kunoichi/kunoichi/themestream/author2.html — kunoichi, Jun 04 '14 at 07:04
It was actually saina's comment that fixed it. But thank you for your suggestion, none the less. — kunoichi, Jun 04 '14 at 10:12
this is strange last day I got +1 and now today again get DownVoting.. who is the person are doing thing. Moderator should take this issue seriously and do needful action on this matter. — Kheema Pandey, Aug 19 '14 at 09:28
Maybe it's people like me, that when viewing your demo just see the element disappearing and then the backside appearing? No animation is playing at all for me on IE11. To be fair most flip demos are not working correctly on IE11, but the question is specific about that version. Anyway, I did not downvote you but this answer isn't helping me either. — Stijn de Witt, Nov 22 '16 at 11:32

Kisspa · Answer 2 · 2014-06-04T07:34:39.623

0

   .flipscene3D:hover .flip {
        /*transform*/
        -webkit-transform: rotateX(180deg);
        -moz-transform: rotateX(180deg);
        -ms-transform: rotateX(180deg);
        -o-transform: rotateX(180deg);
        transform: rotateX(180deg);
       filter: progid:DXImageTransform.Microsoft.Matrix(M11=-1,
        M12=1.2246467991473532e-16,
        M21=-1.2246467991473532e-16,
        M22=-1,
        SizingMethod='auto expand'); 
    }

edited Jun 04 '14 at 07:34

answered Jun 04 '14 at 07:25

Kisspa

584
4
11

Thanks for that, though it didn't fix the problem at my end. IE still does the flip, but shows the flipped image rather than the text: http://www.thekeep.org/~kunoichi/kunoichi/themestream/test.html – kunoichi Jun 04 '14 at 10:30

CSS flip code won't work in IE11

2 Answers2

Linked

Related