css3 transition屬性實現3d動畫效果

　　　　transition屬性是一個很強大的3d動畫屬性，我動手試了一下，不少在網上很火的網頁動畫均可以用這個屬性實現，只能說這個屬性是在是太強大啦，本人在學習次屬性以後才知道本身對css3的認識仍是偏少，如今我給你們介紹並實際實現下該屬性。

　　　　transition字面意思是變遷、變換、過分的意思，因此transition屬性也離不開這個大體意思，其中該屬性中的重要屬性是：　　

　　　　　　　　transition-property:指定過分的元素; 如：transition-property:background,就是指background屬性參與這個過分。

　　　　　　　　transition-duration：指定這個過分持續時間;

　　　　　　　　transition-delsy:延遲過分時間;

　　　　　　　　transition-timing-function:指定時間過分類型; 如：ease\linear\ease-in\ease-out\ease-in-out\　　　　其中：ease是愈來愈慢，linear是勻速　　　　　　　　運動，ease-in是先慢後快，ease-out是先快後慢，ease-in-out是先慢後快再慢

　　　　　　　　transition：all 0.3 ease;　　其中all是指所有屬性參與，0.3是過分時間，ease是過分類型；

　　　　如今應該對這個屬性有了個基本的瞭解，其實知道了上述屬性，咱們就能夠動手作一些頁面上的動畫效果

.divt{
	text-align: center;
	padding-top: 150px;
	margin-top: 30px;
	margin-bottom: 30px;
}
.divimg{
	text-align: center;
}
.imgts{
	width: 175px;
	height:175px;
	background-color: white;
	border: 2px solid blue;
	margin-top: 50px;
	margin-left: 50px;
	text-align: center;
	display: block;
	transform:rotate(10deg);
	transition:all 0.5s ease-in;
	box-shadow: 2px 2px 4px #9932CC;
	padding: 5px;
	margin: auto;
}
.imgts:hover{
	transform:rotate(0deg) scale(1.05);
	box-shadow: 15px 15px 21px blue;
}
.divimg1{
	width: 200px;
	height: 40px;
	background-color: pink;
	transition-property: background-color;
	transition-duration: 0.01s;
	transition-timing-function: ease;
}
.divimg1:hover{
	background-color: yellowgreen;
}

　　

　　　　上述代碼實現了鼠標懸停圖片旋轉和鼠標懸停改變顏色的功能，這個是否是很好用。

　　注：box-shadow是盒陰影屬性，transform:rotate()屬性在http://www.cnblogs.com/chrxc/p/5121347.html提過