Jquery 使用3D变换翻转在IE11中不起作用（我的不同）

我研究了CSS3 3d转换，最后得到了一些CSS3 3d翻转动作的代码。因此，除了Internet Explorer（IE11）之外，它在所有浏览器中都能正常工作。 所以我在stackoverflow.com上调查了这个问题。我得到了一些解决方案，但不幸的是，这些方案对我没有用处。因此，请查看我的JSFIDLE链接，并提供一些解决方案

代码：

$（'one'）。单击（函数（）{
如果（$（this）.is（':checked'））{
$（“#卡”）.addClass（“翻转”）；
$（“.back#append”）.append（“第一个”
”）
}
});
$（'#two'）。单击（函数（）{
如果（$（this）.is（':checked'））{
$（“#卡”）.addClass（“翻转”）；
$（“.back#append”）.append（“第二个”
”）
}
});
$（'#三'）。单击（函数（）{
如果（$（this）.is（':checked'））{
$（“#卡”）.addClass（“翻转”）；
$（“.back#append”）.append（“third one
”）
}
});
$（“#关闭”）。单击（函数（）{
$（“#卡”）.removeClass（“翻转”）；
});
.container{
宽度：200px；
高度：260px；
位置：相对位置；
-ms透视图：800px；
透视图：800px；
}
#卡片{
宽度：100%；
身高：100%；
位置：绝对位置；
-ms变换样式：preserve-3d；
变换样式：保留-3d；
转变：转变1s；
}
#卡片数字{
显示：块；
位置：绝对位置；
宽度：100%；
身高：100%；
背面可见性：隐藏；
边际：0px；
填充：0px；
}
#名片，正面{
背景：红色；
}
#卡，回来{
背景：蓝色；
-ms变换：旋转（180度）；
变换：旋转（180度）；
}
#卡片翻了{
-ms变换：旋转（180度）；
变换：旋转（180度）；
}
#接近{
位置：绝对；底部：0px；右侧：0px；颜色：#fff；
}

一个


两个


三个


关闭
我之前遇到过同样的问题，发现在翻转状态下使背面可见可以解决这个问题。因此，对于您的情况，添加以下行应该可以解决IE11（以及IE10）中的问题


$（'one'）。单击（函数（）{
如果（$（this）.is（':checked'））{
$（“#卡”）.addClass（“翻转”）；
$（“.back#append”）.append（“第一个”
”）
}
});
$（'#two'）。单击（函数（）{
如果（$（this）.is（':checked'））{
$（“#卡”）.addClass（“翻转”）；
$（“.back#append”）.append（“第二个”
”）
}
});
$（'#三'）。单击（函数（）{
如果（$（this）.is（':checked'））{
$（“#卡”）.addClass（“翻转”）；
$（“.back#append”）.append（“third one
”）
}
});
$（“#关闭”）。单击（函数（）{
$（“#卡”）.removeClass（“翻转”）；
});
.container{
宽度：200px；
高度：260px；
位置：相对位置；
-ms透视图：800px；
透视图：800px；
}
#卡片{
宽度：100%；
身高：100%；
位置：绝对位置；
-ms变换样式：preserve-3d；
变换样式：保留-3d；
转变：转变1s；
}
#卡片数字{
显示：块；
位置：绝对位置；
宽度：100%；
身高：100%；
背面可见性：隐藏；
边际：0px；
填充：0px；
}
#名片，正面{
背景：红色；
}
#卡，回来{
背景：蓝色；
-ms变换：旋转（180度）；
变换：旋转（180度）；
}
#卡片翻了{
-ms变换：旋转（180度）；
变换：旋转（180度）；
}
#卡片翻转图形{
背面可见性：可见；
}
#接近{
位置：绝对位置；
底部：0px；
右：0px；
颜色：#fff；
}

一



二



三



关闭
这个答案有助于解决你的问题吗？如果是，请考虑将其标记为空心点击标记。除此之外，请进一步澄清您面临的问题。@Harry，很抱歉迟到了。谢谢。你的回答完全符合我的要求。“很好！”哈利，我有一个疑问。之前我发布了一个关于堆栈溢出的问题。没有人给我提供好东西。你可以看看我的链接，请做必要的。“那道题被标为重复题。因此，我无法为这个问题添加任何答案：（很抱歉这么晚了。你的答案对我非常有用。太好了。谢谢你，并致以问候。@Rayudu：不用担心，伙计。很高兴能帮上忙：）
#card.flipped figure{
  backface-visibility: visible;
}