CSS3回転アニメーション

Question

<img class="image" src="" alt="" width="120" height="120"> 

このアニメーションイメージを機能させることができません。360度の回転を想定しています。

私は以下のCSSが間違っていると思います。

.image { 
    float: left; 
    margin: 0 auto; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 120px; 
    height: 120px; 
    margin-top: -60px; 
    margin-left: -60px; 

    -webkit-animation-name: spin; 
    -webkit-animation-duration: 4000ms; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 

    -moz-animation-name: spin; 
    -moz-animation-duration: 4000ms; 
    -moz-animation-iteration-count: infinite; 
    -moz-animation-timing-function: linear; 

    -ms-animation-name: spin; 
    -ms-animation-duration: 4000ms; 
    -ms-animation-iteration-count: infinite; 
    -ms-animation-timing-function: linear; 

    animation-name: spin; 
    animation-duration: 4000ms; 
    animation-iteration-count: infinite; 
    animation-timing-function: linear; 

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

Answer 1

がdemoであるWebKitのために更新フィドルを確認することができます。正しいアニメーションCSS：あなたのコードの

.image { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 120px; 
 
    height: 120px; 
 
    margin:-60px 0 0 -60px; 
 
    -webkit-animation:spin 4s linear infinite; 
 
    -moz-animation:spin 4s linear infinite; 
 
    animation:spin 4s linear infinite; 
 
} 
 
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } 
 
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } 
 
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

<img class="image" src="http://i.stack.imgur.com/pC1Tv.jpg" alt="" width="120" height="120">

---

いくつかの注意：あなたが.imageルール内のキーフレームを入れ子になってきました

1. 、それは正しくないのです
2. float:leftは絶対配置された要素では機能しません
3. はcaniuseを見てください：IE10は、私はあなたと同じことを利用して回転するイメージを持っている-ms-プレフィックス

Answer 2

360度回転するには、Working Solutionがあります。

HTML：

<img class="image" src="your-image.png"> 

CSS：

.image { 
    overflow: hidden; 
    transition-duration: 0.8s; 
    transition-property: transform; 
} 
.image:hover { 
    transform: rotate(360deg); 
    -webkit-transform: rotate(360deg); 
} 

あなたは画像の上にカーソルを移動する必要があり、あなたが360度回転効果を取得します。

PS：-webkit-拡張を追加して、クロムやその他のWebkitブラウザで機能するようにします。あなたはここにHERE

Answer 3

を必要としない：ここでは

.knoop1 img{ 
    position:absolute; 
    width:114px; 
    height:114px; 
    top:400px; 
    margin:0 auto; 
    margin-left:-195px; 
    z-index:0; 

    -webkit-transition-duration: 0.8s; 
    -moz-transition-duration: 0.8s; 
    -o-transition-duration: 0.8s; 
    transition-duration: 0.8s; 

    -webkit-transition-property: -webkit-transform; 
    -moz-transition-property: -moz-transform; 
    -o-transition-property: -o-transform; 
    transition-property: transform; 

    overflow:hidden; 
} 

.knoop1:hover img{ 
    -webkit-transform:rotate(360deg); 
    -moz-transform:rotate(360deg); 
    -o-transform:rotate(360deg); 
} 

Answer 4

これはあなた

を助けるべきです以下のjsfiddleリンクは、画像の回転方法を理解するのに役立ちます。同じものを使って時計のダイヤルを回転させました。 •T：現在の時刻、

•B：開始値、C•

：値の変化、

•D：期間

http://jsfiddle.net/xw89p/

var rotation = function(){ 
    $("#image").rotate({ 
     angle:0, 
     animateTo:360, 
     callback: rotation, 
     easing: function (x,t,b,c,d){  
      return c*(t/d)+b; 
     } 
    }); 
} 
rotation(); 

、

•x：未使用（リバースイージング）： 関数（x、t、b、c、d）{return b +（t/d）* c; }

Answer 5

画像を反転したい場合は、それを使用できます。

.image{ 
    width: 100%; 
    -webkit-animation:spin 3s linear infinite; 
    -moz-animation:spin 3s linear infinite; 
    animation:spin 3s linear infinite; 
} 
@-moz-keyframes spin { 50% { -moz-transform: rotateY(90deg); } } 
@-webkit-keyframes spin { 50% { -webkit-transform: rotateY(90deg); } } 
@keyframes spin { 50% { -webkit-transform: rotateY(90deg); transform:rotateY(90deg); } }