ウェブサイトのコメント欄で、コメント投稿者のアバターにマウスカーソルを合わせると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モードでは動作しない可能性があります。