当您悬停在红色方形上时,它在x轴上旋转180°,即使背面可见度设置为隐藏,也会显示背面,至少直到达到180°,然后消失。删除透视属性,你会看到它的工作原理,背面是不可见的,但所有的3d效果失去了。
可以通过在transform属性中应用透视来解决这个问题:http://jsfiddle.net/M2pyb但是这将导致与transform-origin-z相关的问题,当z设置为0以外的任何值时,整个事情变为“scaled”:http://jsfiddle.net/s4ndv不幸的是这不是一个解决方案。
解决方法
解决方法是对子元素应用透视变换。我在这里更新你的小提琴:http://jsfiddle.net/jMe2c/
.item { backface-visibility: hidden; transform: perspective(200px) rotateX(0deg); } .container:hover .item { transform: perspective(200px) rotateX(180deg); }
(参见http://stackoverflow.com/a/14507332/2105930的答案)
我认为这是因为在IE 10中,父元素3d属性不会传播到子元素。这是已知的不支持的功能。退房http://msdn.microsoft.com/en-us/library/ie/hh673529%28v=vs.85%29.aspx#the_ms_transform_style_property:
At this time,Internet Explorer 10 does not support the preserve-3d keyword. You can work around this by manually applying the parent element’s transform to each of the child elements in addition to the child element’s normal transform.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。