CSS3 の 360 度の画像回転が機能しないのはなぜですか?

CSS3 回転アニメーション

画像を 360 度回転しようとすると、CSS で問題が発生します。提供された CSS コードには、キーフレーム内に構文エラーが含まれているようです。これによりアニメーションが実行されません。問題の詳細を詳しく調べて、必要な修正を加えてみましょう。

構文エラーは、キーフレーム宣言内の 'from' プロパティと 'to' プロパティにあります。最新のブラウザーの場合、変換プロパティ「transform」は、「-webkit-transform」や「-moz-transform」などのベンダー プレフィックスよりも効果的に機能します。さらに、'from' の代わりに 'to' プロパティを 100% で定義する必要があります。

修正された 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); 
    } 
}

修正されたコードでは、'from' プロパティがが削除され、「to」プロパティの変換値が「rotate(360deg)」に更新されました。さらに、キーフレーム ルールでは、ベンダー プレフィックスのない「transform」のみが使用されるようになりました。

この修正された CSS によりアニメーションの問題が解決され、画像がスムーズに 360 度回転できるようになります。

以上がCSS3 の 360 度の画像回転が機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。