0

CSS3 ブラウザーでのホバー時に GIF 画像をアニメーション化 (フリップ) したいのですが、CSS3 以外のブラウザーでは背景色を変更するだけです。

コードを使用して CSS3 Flip アニメーションを実現できます

.imageselector:hover {
    -webkit-animation-name: rotate; 
    -webkit-animation-duration: 2s; 
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;

    -moz-animation-name: rotate; 
    -moz-animation-duration: 2s; 
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;
}
@-webkit-keyframes rotate {
    from {-webkit-transform: rotateX(0deg);}
    to {-webkit-transform: rotateX(360deg);}
}

@-moz-keyframes rotate {
    from {-moz-transform: rotateX(0deg);}
    to {-moz-transform: rotateX(360deg);}
}

を使用した背景の変更

.imageselector:hover { background:#FFF999; }

両方を組み合わせて、CSS3 をサポートするブラウザーではアニメーションのみを表示し、CSS3 以外のブラウザーでは背景色のみを変更するようにします。

4

1 に答える 1

0

あなたが何をしたいのかを正しく理解している場合は、次のようにアプローチします。ホバーが発生したときに背景色を変更するコンテナー div に画像を配置します。 

    <div class="container">
        <img src="http://1.bp.blogspot.com/-Gv648iUY5p0/UD8rqW3deSI/AAAAAAAAACA/MrG4KxFyM5A/s72-c/Fish.jpeg" />
    </div>

次に、CSS3 アニメーションを画像に適用します。 

    * {margin:0; padding:0;}
    .container {width:100px; height:100px; background:#cde; margin:20px;}
    .container img {padding:14px; display:block; -webkit-transition:all 2s ease;}
    .container:hover {background:#abc;}
    .container:hover img {-webkit-transform:rotateX(180deg);}

それをサポートするブラウザはアニメーションします。残りは背景を変更するだけです。簡単な例を次に示します: http://jsfiddle.net/xfnHr/

于 2013-09-03T14:10:10.570 に答える