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

我已经得到了以下CSS悬停效果，它可以在所有浏览器上正常运行，但不会在IE上运行。他们是三个div，一个父母，两个孩子。我想旋转父div以显示孩子的内容。你可以看到代码https://jsfiddle.net/drz338r9/11// 我真的很感谢任何帮助。在IE上使用CSS转换旋转div元素

的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/

来源

2015-05-20 D.B

在哪个版本的所有转换您检查的IE浏览器？如果它类似于<= IE10，则使用供应商前缀“-ms-'到css属性。 –

是的。我使用IE> = 10和供应商前缀。效果起作用，但以不同的方式，如果我不得不使用额外的规则，我不会。 –

正如其他用户所说，问题是IE不支持保留-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>

来源

2015-05-21 18:52:56 vals

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

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

希望帮助，芽。

来源

2015-05-20 04:31:39 ARLCode

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

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

和

html5shiv

希望这会帮助你，

来源

2015-05-20 04:47:15

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

回答

相关问题