幹貨:css設置頭像旋轉與3D旋轉效果

經常會在一些網站看到評論區,評論人的頭像當鼠標經過會360°旋轉,其實很簡單。

代碼

<!-- css部分 -->
<style type="text/css">
	.cs-css1 img{
	height:300px;
	border-radius:50%;
	border:2px solid green;
	/*變化規則*/
	transition:all 2s;
}
.cs-css1 img:hover{
	/*
		變化動作
		定義2d旋轉,參數填寫角度
	*/
	transform:rotate(360deg);
}
</style>
<!-- HTML部分(很簡單,就一張圖片) -->
<div class="cs-css1">
<img src="/upload/2020/20200702230239_8099.jpg">
</div>

另外一個代碼如下:

<!-- 3D旋轉效果 -->
<style type="text/css">
	.cs-css2 {
	width:300px;
	height:300px;
	border:1px solid red;
	/*如果希望看到3d效果,需要在動的這個元素的父元素,增加一個perspective屬性*/
	perspective:300px;/*3D 元素距視圖的距離,一般與圖片的高一致效果最佳*/
}
.cs-css2 img{
	width:300px;
	height:300px;
	border:1px solid red;
	/*變化規則*/
	/*設置旋轉元素的原點位置*/
	transform-origin:bottom;
	transition:all 2s;
}
.cs-css2 img:hover{
	/*變化動作*/
	transform:rotateX(60deg);
	
}
</style>
<div class="cs-css2">
<img src="/upload/2020/20200702230239_8099.jpg">
</div>

 

相關說明:

1、VIP會員無限製任意下載,免積分。立即前往開通>>

2、下載積分可通過日常 簽到綁定郵箱 以及 積分兌換 等途徑獲得!

3、本站資源大多存儲在雲盤,如出現鏈接失效請評論反饋,如有密碼,均為:www.ipipn.com。

4、所有站內資源僅供學習交流使用。未經原版權作者許可,禁止用於任何商業環境,否則後果自負。為尊重作者版權,請購買正版作品。

5、站內資源來源於網絡公開發表文件或網友分享,如侵犯您的權益,請聯係管理員處理。

6、本站提供的源碼、模板、軟件工具等其他資源,都不包含技術服務,請大家諒解!

7、源碼、模板等資源會隨著技術、壞境的升級而存在部分問題,還請慎重選擇。

PS.源碼均收集自網絡,如有侵犯閣下權益,請發信件至: admin@ipipn.com .


源站網 » 幹貨:css設置頭像旋轉與3D旋轉效果

發表評論

讚助本站發展 維持服務器消耗

全站源碼免費下載 立刻讚助