banner
阿珏酱

阿珏酱

いつもとは逆の電車に乗り、見たこともない風景を見に行く
twitter
github
facebook
bilibili
zhihu
steam_profiles
youtube

簡単なCSS3のプロフィール画像の回転と3D回転効果

ヒント:このヒントを見ると、現在の記事が元のemlogブログシステムから移行されたことを意味します。記事の公開日が古すぎて、レイアウトや内容が完全ではないかもしれませんので、ご了承ください。

シンプルな CSS3 アバターの回転と 3D 回転効果

日付:2017 年 7 月 10 日 阿珏 css ビュー:3896 回 コメント:2 件

よくウェブサイトのコメント欄で、マウスが乗るとコメント者のアバターが360°回転するのを見かけます。

まず効果を見てみましょう。

image

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 回転効果 (フロントエンドの表示スタイルが衝突しているようです -。-)

image

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 モードでは効果が表示されない場合があります。

ユーザーコメント:

image Railgun 丶無限 4 年前 (2017-07-11)
可能ではなく、アニメーション効果は H5 の新機能であり、IE のサポートは確実に問題が発生します。

image 阿珏 4 年前 (2017-07-11)
@Railgun 丶無限:高いバージョンの IE は少なからずサポートしているはずです。

読み込み中...
文章は、創作者によって署名され、ブロックチェーンに安全に保存されています。