IE和翻转动画的不寻常案例
我有一个不寻常的情况，我的翻转动画在IE中不起作用（去图） – 然而，它确实适用于所有其他浏览器（Chrome，FF，Opera，Edge和Safari）……
我不完全确定原因的根源在哪里 – 我已经搜索了一吨但没有任何帮助…很多人说要使用backface-visibility: hidden; 使用-ms-前缀但是也没有用。 我甚至尝试在我的html文件上使用标记，例如：
但无济于事……危机。
为什么IE必须如此困难：/
无论如何，这就是我得到的，我将在下面提供一个示例，其中包含与jsFiddle一起使用的代码来演示它。
请使用INTERNET EXPLORER检查提示，然后使用Chrome或其他浏览器进行比较。
HTML：
Email |
Phone |
Located |
Website |
Availability Calendar 2016
Jan |
Feb |
Mar |
Apr |
May |
Jun |
Jul |
Aug |
Sep |
Oct |
Nov |
Dec |
Expired
Expired
Unavailable
Unavailable
Unavailable
Available
Available
Available
Available
Available
Available
Available
→ Flip Back ←
CSS：
*, *:before, *:after { padding: 0; margin: 0; box-sizing: border-box; } .resume_contact_info_wrapper { width: 35%; min-height: 168px; padding: 0; margin: 0; float: left; transition: all 0.2s; perspective: 800px; } .resume_contact_info { width: 100%; padding: 0; margin: 0; float: left; } .front, .back { width: 100%; padding: 0 0 10px 0; margin: 0; background: #DDD; box-shadow: inset 0 1px #FFF, 0 -1px #000, 0 1px #D1D1D1, -1px 0 #000, 1px 0 #C5C5C5; border: 5px solid rgba(0, 0, 0, 0.7); border-radius: 3px; backface-visibility: hidden; transition: all 0.4s; transform-style: preserve-3d; position: absolute; top: 0; } .back { transform: rotateY(-180deg); } .flipped .back { transform: rotateY(0deg); } .flipped .front { transform: rotateY(180deg); } .resume_abbr { width: 35%; padding: 0; margin: 0; float: left; } .resume_abbr p { width: 100%; padding: 0; margin: 0; float: left; color: #666; font-size: .9em; font-weight: bold; text-align: right; text-shadow: 1px 1px #F1F1F1; cursor: default; } .resume_abbr p:first-child { padding: 10px 0 0 0; } .resume_abbr_info { width: 65%; padding: 0; margin: 0; float: left; } .resume_abbr_info p { width: 100%; padding: 0 0 0 5px; margin: 0; float: left; color: #777; font-size: .9em; text-shadow: 1px 1px #F1F1F1; cursor: default; } .resume_abbr_info p:first-child { padding: 10px 0 0 5px; } .resume_abbr_info p.available { color: #27AE60; } .resume_abbr_info p.unavailable { color: #C0392B; } .resume_abbr_info pa { float: none; color: #28F; } .resume_abbr_info pa:hover { text-decoration: underline; } .schedule { width: 100%; padding: 0; margin: 10px 0 0 0; float: left; } .schedule p { width: 100%; padding: 0; margin: 0; float: left; font-size: .9em; font-weight: bold; text-align: center; text-shadow: 1px 1px #F1F1F1; } .resume_hire { width: calc(100% - 20px); padding: 0; margin: 0 10px; float: left; } .resume_hire a { width: calc(50% - 5px); padding: 5px 0; margin: 12px 5px 0 0; border: 1px solid #28F; float: left; color: #28F; font-size: .75em; font-weight: bold; text-align: center; text-shadow: 1px 1px #F1F1F1; } .resume_hire a:last-of-type { margin: 12px 0 0 5px; } .resume_hire a:hover { background: #28F; box-shadow: inset 0 1px #459CFF; color: #DDD; text-shadow: -1px -1px rgba(0, 0, 0, 0.3); } .resume_hire p { width: 100%; padding: 5px 0; margin: 8px 0 0 0; background: #C0392B; box-shadow: inset 0 1px #E74C3C; border: 1px solid #C0392B; float: left; color: #DDD; font-size: .75em; font-weight: bold; text-align: center; text-shadow: -1px -1px rgba(0, 0, 0, 0.3); text-transform: uppercase; cursor: pointer; } .resume_hire p:hover { background: #E74C3C; box-shadow: inset 0 1px #FF5441; border: 1px solid #E74C3C; }
JS：
/*! * Author: Michael R. Draemel * http://draemel.com/ */ $('.resume_hire p').click(function() { $('.resume_contact_info').toggleClass('flipped'); });
jQuery – >使用2.1.4
这是FIDDLE
任何帮助是极大的赞赏！
更新：
所以，我能够在windows7机器上测试这个并且动画似乎有效…但是，在windows10机器上（使用IE11），它没有…任何想法？
终于想通了 – 它不是最好的解决方案，因为它似乎在翻转动画发生时有点stick – 但它比它之前显示的方式更好 – 根本没有显示动画 – 而是在此修复之前，它只是显示正面，然后点击按钮消失，然后重新出现在背面…所以我会说这是一个改进，至少现在我们看到实际的翻转动画发生。
CSS：
.resume_contact_info_wrapper { width: 25%; min-height: 168px; padding: 0; margin: 0; float: left; transition: all 0.2s; perspective: 800px; /* IE fix - Without this, flip animation is not seen */ -ms-transform: perspective(800px) rotateY(0); }
DEMO – 在IE10 +中查看，无论Windows操作系统如何……
Frickin’IE …