ie css动画,IE浏览器中的CSS翻转动画：转动的一面显示镜像内容

我想从下面的website实现一个翻转动画，我没有悬停效果，并用一个按钮来切换转换。看到这个FiddleIE浏览器中的CSS翻转动画：转动的一面显示镜像内容

IE的给定代码在悬停时工作良好，但通过使用按钮第二个按钮显示在右上角并带有文本镜像。 ？有人能指点我如何使它显示在左上角为其他浏览器正常这只是IE的一块的CSS：

/* 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);

}

}

2015-04-03

Erick

+0

所以你解决了这个问题。因为我面对的是一样的。 –

2015-09-08 13:13:23