經常會在一些網站看到評論區，評論人的頭像當滑鼠經過會360°旋轉

先來看一下效果

.tximg{ height:300px; border-radius:50%; border:2px solid green; /變化規則/ transition:all 2s; } .tximg:hover{ /* 變化動作 定義2d旋轉，參數填寫角度 */ transform:rotate(360deg); }

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 旋轉效果 (前端顯示樣式好像還是衝突了-。-)

.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); }

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 模式下可能不生效