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

阿珏酱發表於2024-05-20
CSSS33D

Tips：當你看到這個提示的時候，說明當前的文章是由原emlog部落格系統搬遷至此的，文章釋出時間已過於久遠，編排和內容不一定完整，還請諒解`

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

日期：2017-7-10 阿珏 css 瀏覽：3896次 評論：2條

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

先看一下效果

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



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

簡單的css3頭像旋轉與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模式下可能不生效

本部落格所有文章 如無特別註明 均為原創。 作者： 阿珏 ， 複製或轉載請 以超連結形式 註明轉自 阿珏部落格 。
原文地址《 簡單的css3頭像旋轉與3D旋轉效果 》

網友評論：

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

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

相關文章