我正在尝试使用 CSS3 3D Transform 构建一个立方体..
对于这个例子,我只有两张脸:
<section id="header-cube-container">
<div id="header-cube">
<figure></figure>
<figure></figure>
</div>
</section>
使用其他所有浏览器我都能得到很好的结果,但 IE 11 却很奇怪。
我在绿色面 (1) 上进行了良好的 3D 平移和旋转,但红色面 (2) 的垂直线未以 3D 形式显示。这只是红脸在绿脸上的投影。
你可以在这个上看到结果fiddle http://jsfiddle.net/TTDH7/16/.
PS:我旋转 100 度而不是 90 度来查看红色面在绿色面上的投影(如果角度为 90 度,则投影不可见)。
谢谢你们!
IE不支持transform-style: preserve-3d
yet.
您必须从中删除转换#header-cube
并将其应用到每个figure
孩子们。不幸的是 IE 已经使用了非前缀属性,所以你不能使用transform-3d
或者必须最后定义前缀属性。
来自IE 转换文档 http://msdn.microsoft.com/en-us/library/ie/hh673529%28v=vs.85%29.aspx#THE_MS_TRANSFORM_STYLE_PROPERTY:
目前,Internet Explorer 10 不支持preserve-3d
关键词。您可以通过手动应用父项来解决此问题
元素对每个子元素的变换
子元素的正常变换。
JSFiddle:http://jsfiddle.net/TTDH7/17/ http://jsfiddle.net/TTDH7/17/
#header-cube {
transform-style: preserve-3d;
transform: rotateX(43deg) rotateZ(130deg);
}
figure:nth-child(1) {
transform: translateZ(-16px);
}
figure:nth-child(2) {
transform: rotateY(-100deg) translateZ(-16px);
}
becomes:
#header-cube {
transform-style: preserve-3d;
-ms-transform-style: none;
transform: rotateX(43deg) rotateZ(130deg);
-ms-transform: none;
}
figure:nth-child(1) {
transform: translateZ(-16px);
-ms-transform: rotateX(43deg) rotateZ(130deg)
translateZ(-16px);
}
figure:nth-child(2) {
transform: rotateY(-100deg) translateZ(-16px);
-ms-transform: rotateX(43deg) rotateZ(130deg)
rotateY(-100deg) translateZ(-16px);
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)