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のバージョンのいずれかとされます。 ご協力いただければ幸いです。前もって感謝します。
IE9以下で確実に。彼らがEdgeでこれを実装したかどうかは不明です。 –
これはIE10以上で動作するはずです。 – Preeti
はhttp://caniuse.com/#search=backface-visibility ie8を参照してください - サポートしていませんie11-部分的なサポート。エッジでサポート –