我不明白为什么我看不到图像 2，它以某种视角转换了 90 度？ 它在所有其他浏览器中都能完美运行。 IE 只是岩石。接下来的几个小时，IT 无缘无故地让你忙个不停。 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;
}
最佳答案
IE 根本不支持它。参见 http://caniuse.com/transforms3d
您会注意到 IE 仅提供部分支持，说明
Partial support in IE10 refers to not supporting the transform-style: preserve-3d property.
我一直在寻找 polyfill，但目前似乎不存在。如果您想要完全支持，则必须在 jQuery 中执行此操作。
附带说明一下，我认为您的动画效果不错，我认为您不必担心 IE，因为大多数人都在使用 Chrome 或 FF。可惜 IE 必须落后。
关于html - 仅在 ie 中的 css3 中转换 90 度时元素不可见？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19303009/