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 部分 (很簡單,就一張圖片)#

<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 代碼的部分和頭像旋轉部分的一模一樣,只需放一張圖片即可,此處忽略。

因我是直接將效果圖插入當前頁面,會導致與當前頁面的 css 樣式發生衝突,毀掉整個頁面,固修改了效果圖的樣式選擇器

注意:在 IE 模式下可能不生效

網友評論:

image Railgun 丶無限 4 年前 (2017-07-11)
不是可能,動畫效果是 h5 新特性,ie 那渣逼的支持肯定是會出事的

image 阿珏 4 年前 (2017-07-11)
@Railgun 丶無限:高版本的 ie 不是應該多多少少支持那麼一點麼

載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。