CSS3 を使用してアバターの回転効果アニメーションを実装する

今回は、CSS3 を使用してアバターの回転効果アニメーションを実現する方法と、CSS3 を使用してアバターの回転効果アニメーションを実現する方法についていくつかのメモを紹介します。以下は実践的なケースです。

マウスが置かれていないときの効果:

マウスが置かれた後の回転効果:

遷移: すべての 2.0 を意味します。 2 秒以内に変換完了;

transform:rotate(360deg); 画像が 360 度回転することを意味します。

nbsp;html>

    
        <meta>
        <title></title>
        <style>
            img{
                border: #000 solid 2px;
                display: block;
                margin: 50px auto;
                border-radius: 50%;
                transition: all 2.0s;
            }
            img:hover{
                transform: rotate(360deg);
            }
        </style>
    
    
        <img  alt="CSS3 を使用してアバターの回転効果アニメーションを実装する" >
    

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Bootstrapは価格表を実装します

CSSで波紋アニメーションを作成します

CSSはブラウザのデフォルトスタイルをどのように処理しますか

以上がCSS3 を使用してアバターの回転効果アニメーションを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。