2016-06-20 4 views
0

IEで以下のアニメーションを達成したいと思います。コインのように画像を回転させる必要があり、回転するときに別の画像を表示する必要があります。 IEでは、問題はBackface-visibilityがわからないことが原因だと思います。CSS3のプロパティ 'backface-visibility'はIEのバージョンでは動作しません。

http://codepen.io/anon/pen/OXRoXJ

#product{ 
width: 300px; 
height: 250px; 
top: 0px; 
left: 0px; 
-webkit-perspective:1000px; 
-moz-perspective:1000px; 
perspective: 1000px; 
transform-style: preserve-3d; 
-webkit-transform-style: preserve-3d; 
transition: all 1.0s linear; 
border-spacing: 0; 
} 
.face img{ 
    width: 100%; 
    height: 100%; 
     backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
     -webkit-backface-visibility: hidden; 
} 
.back img{ 
    display: block; 
    transform: rotateY(180deg); 
    -webkit-transform: rotateY(180deg); 
    text-align: center; 
    width: 218px; 
    height: 219px; 

backface-visibility: hidden; 
-moz-backface-visibility: hidden; 
-webkit-backface-visibility: hidden; 
} 

それはクロム、FirefoxとSafariので細かい作業ではなく、IEのバージョンのいずれかとされます。 ご協力いただければ幸いです。前もって感謝します。

+0

IE9以下で確実に。彼らがEdgeでこれを実装したかどうかは不明です。 –

+0

これはIE10以上で動作するはずです。 – Preeti

+1

はhttp://caniuse.com/#search=backface-visibility ie8を参照してください - サポートしていませんie11-部分的なサポート。エッジでサポート –

答えて

0

Firefox 10+およびIE 10+は、プレフィックスのない背面の視認性をサポートします。 オペラ(ポストブリンク、15+)、クローム、サファリ、iOS版、およびAndroidのすべては、ブラウザのサポート -webkit-背面視認性

が必要になります。私の知る限り、それは動作しませんでした覚えているよう https://css-tricks.com/almanac/properties/b/backface-visibility/

関連する問題