幹貨：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>