ヒント：このヒントを見ると、現在の記事が元のemlogブログシステムから移行されたことを意味します。記事の公開日が古すぎて、レイアウトや内容が完全ではないかもしれませんので、ご了承ください。
シンプルな CSS3 アバターの回転と 3D 回転効果
日付：2017 年 7 月 10 日 阿珏 css ビュー：3896 回 コメント：2 件
よくウェブサイトのコメント欄で、マウスが乗るとコメント者のアバターが360°回転するのを見かけます。
まず効果を見てみましょう。
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 回転効果 (フロントエンドの表示スタイルが衝突しているようです -。-)
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 モードでは効果が表示されない場合があります。
ユーザーコメント：
Railgun 丶無限 4 年前 (2017-07-11)
可能ではなく、アニメーション効果は H5 の新機能であり、IE のサポートは確実に問題が発生します。
阿珏 4 年前 (2017-07-11)
@Railgun 丶無限：高いバージョンの IE は少なからずサポートしているはずです。