幹貨: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旋轉效果