Css 背面可见性在IE10中不起作用-在webkit中可以正常工作
我正在构建一个简单的纯css“card flip”动画，它必须在IE10中工作，但遗憾的是，我所写的没有 或 我可以从IE10中看到背面可见性的工作原理，所以也许我忽略了一些愚蠢的事情，也许一双新的眼睛可能会有所帮助Css 背面可见性在IE10中不起作用-在webkit中可以正常工作,css,css-transitions,css-transforms,internet-explorer-10,Css,Css Transitions,Css Transforms,Internet Explorer 10,我正在构建一个简单的纯css“card flip”动画，它必须在IE10中工作，但遗憾的是，我所写的没有 或 我可以从IE10中看到背面可见性的工作原理，所以也许我忽略了一些愚蠢的事情，也许一双新的眼睛可能会有所帮助 提前谢谢 一些微软IE开发人员看到了我的推文，已经开始修复了 显然，IE10不支持preserve-3d，于是他们迅速启动了 非常感谢并感谢您的帮助-非常感谢。（这是对microsoft 360°翻转示例工作原理的评论。） 首先看一看示例本身，MS的解决方案从初始代码中删除了pre
提前谢谢 一些微软IE开发人员看到了我的推文，已经开始修复了 显然，IE10不支持preserve-3d，于是他们迅速启动了 非常感谢并感谢您的帮助-非常感谢。（这是对microsoft 360°翻转示例工作原理的评论。） 首先看一看示例本身，MS的解决方案从初始代码中删除了preserve-3d transform style属性 事实证明IE10不支持preserve-3d，他们建议在msdn上采取这样的解决方法： 当“变换样式”设置为默认“展开”值时，子元素将继承父旋转。因此，卡的正面/背面都旋转到360°（=0°），这里的技巧是背面将显示在顶部，因为它在DOM中稍后出现 为了使这一点更加明显，我在两个示例的背面都添加了
opacity:0.5因此，MS方式在某些情况下可以工作，但并非所有情况下都没有对preserve-3d的真正支持。这似乎与 当背面可见性应用于元素本身时，它在IE10上起作用（如果应用于父元素，它将不起作用）。应将其组合到相同的变换属性中，如下所示： .back{ transform : perspective(1000px) rotateY(0deg); } .front{ transform : perspective(1000px) rotateY(180deg); } .回来{ 变换：透视（1000px）旋转（0度）； } .前线{ 变换：透视（1000px）旋转（180度）； }
我只将背面可见性应用于子元素，而IE10仍然显示背面。删除preserve-3d会破坏3d动画的主要视觉功能之一，因此这不是一个可行的解决方法 不幸的是，@reybango和@sgalineau上面提到的演示将效果外观从3d旋转更改为简单的2d宽度更改，因此这也不是可行的解决方法
归根结底，IE10需要升级以支持编写的CSS 3d动画规范。这是我的解决方案<代码>
我试过IE 11和Chrome。它工作起来就像一个翻盖盒。我真的很想知道为什么会这样。将两个元件旋转360°对我来说没有意义。他们两个应该在同一个位置，不是吗？是的，这对我来说也没有意义。有人知道为什么吗？这似乎有效。但没有前景。只要我将
px