Html 翻转框动画适用于除Safari和IE之外的所有浏览器

狩猎问题：它被切成两半并翻转。 IE问题：它翻转后仍然显示卡正面的镜像，而不是背面

我从这个博客复制了代码：

为他的网站工作，但不是我的

/******
翻盖盒
********/
.翻转容器{
-webkit透视图：1000；
-莫兹透视图：1000；
-o型透视图：1000；
前景：1 000；
}
.flip容器：悬停.flipper，
.flip-container.hover.flipper{
-webkit变换：旋转（180度）；
-莫兹变换：旋转（180度）；
-o变换：旋转（180度）；
变换：旋转（180度）；
}
.翻转容器，.正面，.背面{
宽度：100%；
高度：250px；
}
.鳍状肢{
-webkit转换：1.0s；
-webkit变换样式：保留-3d；
-moz转换：1.0s；
-moz变换样式：preserve-3d；
-o-转变：0.6s；
-o变换样式：preserve-3d；
过渡期：1.0s；
变换样式：保留-3d；
位置：相对位置；
}
.前面，.后面{
-webkit背面可见性：隐藏；
-moz背面可见性：隐藏；
-o-背面-可见性：隐藏；
背面可见性：隐藏；
位置：绝对位置；
排名：0；
左：0；
}
.前线{
背景：url(http://www.../wp-content/uploads/pic.jpg)0 0不重复；
背景尺寸：封面；
z指数：2；
}
.前h2.翻转框标题{
位置：相对位置；
最高：40%；
文本对齐：居中；
保证金：0自动；
颜色：#fff；
}
.回来{
-webkit变换：旋转（180度）；
-莫兹变换：旋转（180度）；
-o变换：旋转（180度）；
变换：旋转（180度）；
背景#2a3386；
}
.封号{
字体大小：粗体；
颜色：#000；
位置：绝对位置；
顶部：20px；
左：0；
右：0；
文本对齐：居中；
字体大小：30px；
}
.back description p{
字体大小：粗体；
位置：绝对位置；
顶部：80px；
左：0；
右：0；
文本对齐：居中；
颜色：#000；
}
.背a{
位置：相对位置；
顶部：180像素；
文本对齐：居中；
}
.返回按钮：悬停{光标：指针；}
前{
内容：“；
显示：块；
身高：100%；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
背景色：rgba（42,51134.3）；
}

网络
网络
业界最有效的制造商/分销商网络机会

我通过添加所需的额外css并清理我使用的一些div解决了这个问题。

您可能需要添加一些代码。正如我现在写的，这只是一个评论，而不是一个答案。正如@GhostCat所说，这不是一个答案。请提供解决此问题的代码。