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

Question

我得到了以下 CSS 悬停效果，它在所有浏览器上都能正常运行，但在 IE 上却不行。他们是三个div人，一个parent人，两个child人。我想旋转 parent div 以显示 child 的内容。你可以在 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);
    }

==更新==

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

Answer 1

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

希望对你有所帮助，伙计。

Answer 2

"CSS3 Solutions for Internet Explorer"在爆红杂志文章里有详细解答你可以参考这个：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 元素

Rotating div elements with CSS transform on IE

html

css

css-transitions

css-transforms