元素仅在ie中转换为css3中的90 deg时不可见？
元素仅在ie中转换为css3中的90 deg时不可见？
提问于 2013-10-10 18:05:03
我不明白为什么我不能看到图像2，它被转换成90度与某些角度？它在所有其他浏览器中都能很好地工作。只是石头而已。它会让你无缘无故地忙上几个小时。Html：
<body>
<div class="scene">
<div class="cube">
<div class="cube-face cube-face-front"><img src="http://imageshack.us/a/img545/9813/58zj.jpg" alt="Images"> </div>
<div class="cube-face cube-face-top"> <img src="http://imageshack.us/a/img818/5776/8ik6.jpg" alt="Images"> </div>
</div>
</div>Css：
body {
-webkit-transition: all .6s;
-moz-transition: all .6s;
-o-transition: all .6s;
-ms-transition: all .6s;
transition: all .6s;
width: 960px;
margin: 100px auto;
}
.scene {
margin-top: 50px;
width: 300px;
height: 300px;
-webkit-perspective: 3000px;
border: 5px solid black;
}
.cube {
cursor: pointer;
width: inherit;
height: inherit;
position: relative;
-webkit-transition: all 2s;
-moz-transition: all 2s;
-o-transition: all 2s;
-ms-transition: all 2s;
transition: all 2s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX(-15deg) rotateY(-15deg);
-moz-transform: rotateX(-15deg) rotateY(-15deg);
-o-transform: rotateX(-15deg) rotateY(-15deg);
-ms-transform: rotateX(-15deg) rotateY(-15deg);
transform: rotateX(-15deg) rotateY(-15deg);
}
.cube-face {
width: inherit;
height: inherit;
position: absolute;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
filter: alpha(opacity=95);
opacity: 0.95;
}
.cube-face-front {
-webkit-transform: translate3d(0,0,0px);
-moz-transform: translate3d(0,0,0px);
-o-transform: translate3d(0,0,0px);
-ms-transform: translate3d(0,0,0px);
transform: translate3d(0,0,0px);
}
.cube-face-top {
-webkit-transform: rotateX(90deg) translate3d(0,-150px,150px);
-moz-transform: rotateX(90deg) translate3d(0,-150px,150px);
-o-transform: rotateX(90deg) translate3d(0,-150px,150px);
-ms-transform: rotateX(90deg) translate3d(0,-150px,150px);
transform: rotateX(90deg) translate3d(0,-150px,150px);
}
.cube:hover {
-webkit-transform: rotateX(-90deg) translate3d(0,150px,150px);
-moz-transform: rotateX(-90deg) translate3d(0,150px,150px);
-o-transform: rotateX(-90deg) translate3d(0,150px,150px);
-ms-transform: rotateX(-90deg) translate3d(0,150px,150px);
transform: rotateX(-90deg) translate3d(0,150px,150px);
}
img {
width: inherit;
height: inherit;
}这是我的代码笔 我的屏幕截图
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-10-10 18:21:00
它根本不受IE的支持。请参阅http://caniuse.com/transforms3d
您将注意到IE只有部分支持，并声明
IE10中的部分支持是指不支持转换样式:保存-3D属性。
我已经寻找一个多填充，但它似乎没有任何目前存在。如果您想要得到充分的支持，就必须在jQuery中这样做。
另外，我认为你有一个很好的动画，我不认为你应该担心IE，因为大多数人都在使用Chrome或FF。太糟糕了，IE不得不落后。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19303009
复制相关文章
相似问题
腾讯云开发者
