Question

我不明白为什么我不能看到图像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;
}

Here my code pen My screen shot

Answer 1

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

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

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

我已经找了一个polyfill，但它似乎没有任何现在存在。如果你想要完全支持，你必须在jQuery中这样做。

另一方面，我认为你有一个很好的动画，我认为你不应该担心IE，因为大多数人都在使用Chrome或FF ..太糟糕的IE必须落后。

当在css3中转换90度时，元素不可见，即仅？

1 个答案: