Question

我有以下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);
    }

== UPDATE ==

根据有用的评论，可以在此处找到解决方案：https://jsfiddle.net/ohqxnxnn/

Answer 1

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

希望有所帮助，萌芽。

Answer 2

对于Internet Explorer＆＃34;＆＃34; CSS3解决方案有详细解答。在粉碎杂志文章中，你可以参考：http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/

您还可以添加：http://modernizr.com/docs/

和

html5shiv

希望这会对你有所帮助，

Answer 3

正如其他用户所说，问题是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>

在IE上使用CSS转换div元素

3 个答案: