簡単なCSS3アバター回転と3D回転効果
ウェブサイトのコメント欄で、コメント投稿者のアバターにマウスカーソルを合わせると360°回転するのをよく見かけます。 まず効果を見てみましょう。 .tximg{ height:300px; border-radius:50%; border:2px solid green; /*変化規則*/ transition:all 2s; } .tximg:hover{ /* 変化動作 定義2d回転、パラメータは角度を記入 */ transform:rotate(360deg); } CSS部分 img{ height:300px; border-radius:50%; border:2px solid green; /*変化規則*/ transition:all 2s; } img:hover{ /* 変化動作 2D回転を定義し、パラメータに角度を記入 */ transform:rotate(360deg); } HTML部分（非常にシンプルで、画像が1枚だけです） <img src="http://www.52ecy.cn/log0.png"> 3D回転効果（フロントエンドの表示スタイルがやはり競合しているようです -。-） .div{ width:300px; height:300px; border:1px solid red; /*3D効果を見たい場合は、動く要素の親要素にperspective属性を追加する必要があります*/ perspective:300px;/*3D要素からビューまでの距離、通常は画像の高さと同じにすると最も効果的です*/ } .img{ width:300px; height:300px; border:1px solid red; /*変化規則*/ /*回転要素の原点位置を設定*/ transform-origin:bottom; transition:all 2s; } .img:hover{ /*変化動作*/ transform:rotateX(60deg); } CSSコード div{ width:300px; height:300px; border:1px solid red; /*3D効果を見たい場合は、動く要素の親要素にperspective属性を追加する必要があります*/ perspective:300px;/*3D要素からビューまでの距離、通常は画像の高さと同じにすると最も効果的です*/ } img{ width:300px; height:300px; border:1px solid red; /*変化規則*/ /*回転要素の原点位置を設定*/ transform-origin:bottom; transition:all 2s; } img:hover{ /*変化動作*/ transform:rotateX(60deg); } HTMLコードの部分はアバター回転の部分と全く同じで、画像を1枚置くだけなので、ここでは省略します。 効果画像を現在のページに直接挿入すると、現在のページのCSSスタイルと競合し、ページ全体が崩れてしまうため、効果画像のスタイルセレクタを変更しました。 注意：IEモードでは動作しない可能性があります。