Html css3转换不在IE中工作
一,;我正在开发一个flipcard应用程序,并为此使用css转换。它在所有其他浏览器中都很酷,但在IE中,它只显示了卡片的背面,没有任何转换。有什么办法解决这个问题吗 这是我的CSS:Html css3转换不在IE中工作,html,css,flip,Html,Css,Flip,一,;我正在开发一个flipcard应用程序,并为此使用css转换。它在所有其他浏览器中都很酷,但在IE中,它只显示了卡片的背面,没有任何转换。有什么办法解决这个问题吗 这是我的CSS: #f1_container { position: relative; margin: 10px auto; /*width: 170px;*/ height: 170px; z-index: 1; } .face.back { display: none; } #f1_container { -webkit-
#f1_container { position: relative; margin: 10px auto; /*width: 170px;*/ height: 170px; z-index: 1; } .face.back { display: none; } #f1_container { -webkit-perspective: 1000; } #f1_card { width: 100%; height: 100%; -webkit-transform-style: preserve-3d; -webkit-transition: all 1.0s linear; -moz-transform-style: preserve-3d; -moz-transition: all 1.0s linear; -o-transform-style: preserve-3d; -o-transition: all 1.0s linear; -ms-transform-style: preserve-3d; -ms-transition: all 1.0s linear; transform-style: preserve-3d; transition: all 1.0s linear; } #f1_container:hover #f1_card, #f1_container.hover_effect #f1_card { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); -ms-transform: rotateY(180deg); transform: rotateY(180deg); /*-webkit-box-shadow: -10px 10px 10px #aaa; -moz-box-shadow: -10px 10px 10px #aaa; box-shadow: -10px 10px 10px #aaa;*/ } .face { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; } .face.back { display: block; -webkit-transform: rotateY(180deg); -webkit-box-sizing: border-box; -moz-transform: rotateY(180deg); -moz-box-sizing: border-box; -o-transform: rotateY(180deg); -o-box-sizing: border-box; -ms-transform: rotateY(180deg); -ms-box-sizing: border-box; transform: rotateY(180deg); box-sizing: border-box; padding-bottom: auto; color: white; text-align: left; }
以下是HTML部分:
<div id="f1_container">
<div class="shadow" id="f1_card">
<div class="front face"><img class="img-circle" alt="" src="http://pearlacademy.com/wp-content/uploads/2014/01/stylingFront.png" /></div>
<div class="back face center"><img src="http://pearlacademy.com/wp-content/uploads/2014/01/stylingBack.png" alt="College For Fashion Designing" width="170" height="170" usemap="#Map1111" class="img-circle" style="border: 0px;" title="College For Fashion Designing" border="0" />
<map name="Map1111">
<area shape="rect" coords="9,27,163,60" href="http://pearlacademy.com/ba-honours-courses/fashion-styling-image-design/">
<area shape="rect" coords="25,65,143,95" href="http://pearlacademy.com/postgraduate-diploma-programmes/interior-design-and-styling/">
<area shape="rect" coords="36,123,133,154" href="http://pearlacademy.com/diploma-course/styling-for-interiors/">
<area shape="rect" coords="3,99,166,121" href="http://pearlacademy.com/postgraduate-diploma-programmes/fashion-styling-and-image-design/">
</map>
</div>
</div>
</div>
尝试添加-ms透视图:1000px
透视图:1000px代码>
低于
-webkit透视图:1000代码>
在#f1_容器中
。
这可能会让你得到IE10的支持
你的代码使用了许多新的CSS特性,我不知道有什么合理的方法可以让它在IE8中工作。
特别是,请查看这三个功能的兼容性:
https://developer.mozilla.org/en-US/docs/Web/CSS/perspective
https://developer.mozilla.org/en-US/docs/Web/CSS/backface-visibility
https://developer.mozilla.org/en-US/docs/Web/CSS/transform
不幸的是,在IE8及以下版本中,没有一种方法可以通过CSS实现这一点。您需要退回到JavaScript实现。例如,您可以使用
有关IE中转换的更多信息,您还应查看
我给你的建议是,权衡一下实现上述方法所需的时间,而不是在旧浏览器上完全放弃花哨的转换,转而做一些更简单的事情。@canadaCoder:我正在用IE8进行测试。如果是这样,我最好的答案是这是不可能的。我将更新答案。当询问IE相关问题时,请始终指定您正在测试的IE版本。此外,请检查以确认您正在使用的IE版本是否支持您正在使用的功能。