CSS3で背景画像を回転させる

Question

私は、右向きの矢印を持つ背景画像を持っています。ユーザーがボタンをクリックすると、選択された状態は、矢印を（画像スプライトの異なる背景位置を使用して）下に向けて変更します。

CSS3を使ってこれをアニメーション化するには、ボタンをクリックしてjQueryが「選択された」クラスを割り当てたら、右から下にアニメーション（わずか90度）で回転しますか？ （右の矢印のある単一の画像/位置を使用することをお勧めします）

変換またはキーのアニメーションフレームを使用する必要があるかどうかは確かです。ここで

Answer 1

あなたが::after（または::before）を使用することができpseudo-element、アニメーションを生成する

div /*some irrelevant css */ 
{ 
    background:-webkit-linear-gradient(top,orange,orangered); 
    background:-moz-linear-gradient(top,orange,orangered); 
    float:left;padding:10px 20px;color:white;text-shadow:0 1px black; 
    font-size:20px;font-family:sans-serif;border:1px orangered solid; 
    border-radius:5px;cursor:pointer; 
} 

/* element to animate */ 
div::after    /* you will use for example "a::after" */ 
{ 
    content:' ►';  /* instead of content you could use a bgimage here */ 
    float:right; 
    margin:0 0 0 10px; 
    -moz-transition:0.5s all; 
    -webkit-transition:0.5s all; 
} 

/* actual animation */ 
div:hover::after   /* you will use for example "a.selected::after" */ 
{ 
    -moz-transform:rotate(90deg); 
    -webkit-transform:rotate(90deg); 
} 

HTML ：

<div>Test button</div> 

代わりに

jsfiddleデモのelement.selectedクラスを使用します：http://jsfiddle.net/p8kkf/

希望これは

Answer 2

私は背景画像を回転させるために使用されている回転CSSクラスです：

.rotating { 
    -webkit-animation: rotating-function 1.25s linear infinite; 
    -moz-animation: rotating-function 1.25s linear infinite; 
     -ms-animation: rotating-function 1.25s linear infinite; 
     -o-animation: rotating-function 1.25s linear infinite; 
      animation: rotating-function 1.25s linear infinite; 
} 

@-webkit-keyframes rotating-function { 
    from { 
    -webkit-transform: rotate(0deg); 
    } 
    to { 
    -webkit-transform: rotate(360deg); 
    } 
} 

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

@-ms-keyframes rotating-function { 
    from { 
    -ms-transform: rotate(0deg); 
    } 
    to { 
    -ms-transform: rotate(360deg); 
    } 
} 

@-o-keyframes rotating-function { 
    from { 
    -o-transform: rotate(0deg); 
    } 
    to { 
    -o-transform: rotate(360deg); 
    } 
} 

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