CSS flipping animation in IE: Turned side shows mirror content

Question

I am trying to implement a flip animation from the following website and I got it to work without hover effect and with a button to toggle the transition. See this Fiddle

A given code for IE worked good on hover, but by using the button the 2nd button is shown in the right top corner with the text mirrored. Can someone advice me how to make it show normal in the left top corner as in other browsers?This is the piece of css just for IE:

        /* entire container, keeps perspective */
.flip-container {
    perspective: 1000;
    transform-style: preserve-3d;
}
    /*  UPDATED! flip the pane when hovered */
    .flip-container.hover .back {
        transform: rotateY(0deg);
    }
    .flip-container.hover .front {
        transform: rotateY(180deg);
    }

.flip-container, .front, .back {
    width: 100%;
    height: 500px;
}

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;
    transition: 0.6s;
    transform-style: preserve-3d;

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

/*  UPDATED! front pane, placed above back */
.front {
    z-index: 2;
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
    transform: rotateY(-180deg);
}

/* 
    Some vertical flip updates 
*/
.vertical.flip-container {
    position: relative;
}

    .vertical .back {
        transform: rotateX(180deg);
    }

    .vertical.flip-container:hover .back {
        transform: rotateX(0deg);
    }
.vertical.flip-container:hover .front {
    transform: rotateX(180deg);
}
}

score 1 · Accepted Answer · answered Apr 08 '15 at 15:16

1

IE has known issues with the transform property. For your sample, on the IE-only styles remove the transform on hover (.hover) from the parent div. See fiddle.

.flip-container.hover .flipper {
    transform: none;
}

answered Apr 08 '15 at 15:16

Francis Nepomuceno

4,935
4
29
35

Hi, I just chked ur answer. it works but could you please chk it same with http://stackoverflow.com/questions/32455596/flip-box-height-of-back-side-also-doesnot-work-on-ie – Prince Sodhi Sep 08 '15 at 13:22

CSS flipping animation in IE: Turned side shows mirror content

1 Answers1