簡單的css3頭像旋轉與3D旋轉效果

提示：當你看到這個提示的時候，說明當前的文章是由原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 部分 (很簡單，就一張圖片)#

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

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

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

網友評論：

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

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