CODEWITHSUNDEEP
javascripthtmlcsstransition
Erick
Erick

Reputation: 15

CSS flipping animation in IE: Turned side shows mirror content

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

Upvotes: 0

Views: 178

Answers (1)

Francis Nepomuceno
Francis Nepomuceno

Reputation: 5085

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

Upvotes: 1

Related Questions