用CSS旋转的DIV元素在IE上转换

Question

我有以下CSS悬停效应，在所有浏览器上都行为正确，但在IE上没有。他们是三个divs，一个父母，两个孩子。我想旋转父级，以显示孩子的内容。您可以在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

要解决它，您需要在子元素，初始元素和旋转的元素上应用所有转换

.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>

Answer 2

我为您做了一些研究，并查看了您的代码。问题是IE不完全支持Preserve-3D。幸运的是，这里有一些工作：CSS3-3D Flip Animation -IE10 Transform -Origin：Preserve -3D Workaround

希望对您有帮助，

Answer 3

在Smashing Magazine文章中，您可以参考以下内容：http：//www.smashingmagazine.com/2010/2010/04/28/css3-/css3--internet-explorer/

的解决方案

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

和

html5shiv

希望这对您有帮助，