1

我不明白为什么我看不到图像 2 以某种视角转换了 90 度？它在所有其他浏览器中都能完美运行。IE只是摇滚。IT 让您在接下来的几个小时内无缘无故地忙碌。网页：

<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;
}

这是我的代码笔 我的屏幕截图

4

1 回答 1

2

IE根本不支持它。见http://caniuse.com/transforms3d

你会注意到 IE 只有部分支持，说明

IE10 中的部分支持是指不支持 transform-style: preserve-3d 属性。

我一直在寻找一个 polyfill，但它似乎目前并不存在。如果您想要完全支持，您必须在 jQuery 中执行此操作。

顺便说一句，我认为你有一个不错的动画，我认为你不应该担心 IE，因为大多数人都在使用 Chrome 或 FF .. 太糟糕了 IE 不得不落后。

于 2013-10-10T18:21:00.833 回答