1

ある視点で 90 度変換された画像 2 が見えない理由がわかりません。他のすべてのブラウザで完全に機能します。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;
}

ここに私のコードペン 私のスクリーンショット

4

1 に答える 1

2

IE ではサポートされていません。http://caniuse.com/transforms3dを参照

IE は部分的にしかサポートされていないことに気付くでしょう。

IE10 での部分的なサポートは、transform-style: preserve-3d プロパティをサポートしていないことを意味します。

ポリフィルを探しましたが、現在存在しているようには見えません。完全なサポートが必要な場合は、jQuery でこれを行う必要があります。

余談ですが、あなたのアニメーションは素晴らしいと思います。ほとんどの人は Chrome や FF を使用しているため、IE について心配する必要はないと思います。残念ながら IE は遅れをとっています。

于 2013-10-10T18:21:00.833 に答える