在 IE 上使用 CSS 变换旋转 div 元素答案

【问题标题】：Rotating div elements with CSS transform on IE在 IE 上使用 CSS 变换旋转 div 元素
【发布时间】：2015-08-01 03:19:23
【问题描述】：

我有以下 CSS 悬停效果，它在所有浏览器上都能正常运行，但在 IE 上却不行。他们是三个div，一个父母，两个孩子。我想旋转父 div 以显示孩子的内容。您可以在https://jsfiddle.net/drz338r9/11// 中查看代码非常感谢任何帮助。

html代码为：

 <a class="social" href="" target="_blank">
         <div class="front">
         </div>
         <div class="back">
         </div>
  </a>

CSS 代码是：

      .social {
      float: left;
      width: 100px; 
      height: 100px;    
      position: relative;
     -ms-transform: rotateY(0deg);
     transition: transform .25s ease-out;
     transform-style: preserve-3d;
    }
    .social > div {
      width: 100px; height: 100px;
      position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    }
    .social >.front {
      transform:translateZ(40px);
      width: 100px; 
      height: 100px; 
      background: red;
    }
    .social >.back {
      background: #3B5998; 
     -ms-transform: rotateY(-100deg) translateZ(40px);
     transform:rotateY(-100deg) translateZ(40px);
       width: 100px; 
        height: 100px; 
       background: black;
    }
    .social:hover {
      -ms-transform: rotateY(100deg);
      transform: rotateY(100deg);
    }

== 更新 ==

基于有用的 cmets，可以在这里找到解决方案：https://jsfiddle.net/ohqxnxnn/

【问题讨论】：

您检查的是哪个版本的 IE？如果它像 -ms-。
是的。我也在使用 IE>=10 和供应商前缀。效果有效，但以不同的方式，如果我必须使用额外的规则，我不会。

标签： html css css-transitions css-transforms

【解决方案1】：

正如其他用户所说，问题是IE不支持preserve-3d

要解决这个问题，您需要对子元素、初始元素和旋转元素应用所有变换

.social {
  float: left;
  width: 100px; 
  height: 100px;    
  position: relative;
}
.social > div {
    width: 100px; height: 100px;
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    transition: transform .25s ease-out;
}
.social > .front {
    width: 100px; 
    height: 100px; 
    background: red;
    transform: translateZ(40px);
}
.social:hover .front {
    transform: rotateY(90deg) translateZ(40px);
}
.social >.back {
     transform:rotateY(-90deg) translateZ(40px);
     width: 100px; 
     height: 100px; 
     background: black;
}

.social:hover .back {
     transform:rotateY(0deg) translateZ(40px);
}

<a class="social" href="" target="_blank">
     <div class="front">
     </div>
     <div class="back">
     </div>
   </a>

【讨论】：

非常感谢。很好的解决方案。

【解决方案2】：

我为您做了一些研究并查看了您的代码。问题是 IE 不完全支持 preserve-3d。幸运的是，这里有一些解决方法：CSS3 - 3D Flip Animation - IE10 transform-origin: preserve-3d workaround

希望对你有帮助，老兄。

【讨论】：

【解决方案3】：

关于“Internet Explorer 的 CSS3 解决方案”的详细答案，在粉碎杂志文章中你可以参考：http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/

您也可以包括：http://modernizr.com/docs/

和

html5shiv

希望对你有帮助，

【讨论】：