編碼的世界 / 優質文選 / 生涯


2022年8月03日
-   

問題?CSS3中transform移動屬性的使用
原理:該屬性是將原來存在的元素發生位置的變化,包括旋轉角度,水平,垂直位置的變化。
transform 屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。
例子:
		#div1{
width: 200px;
height: 200px;
background-color: blue;
/* transition css3屬性,表示的是過渡 ,表示一個元素的樣式,變成另外一個樣式,有動畫的過程,必須寫在原來屬性中,ease表示不是勻速的。默認是勻速的,延遲0s開始*/
transition: all 2s ease 0s;
}
#div1:hover{
background-color: green;
width: 0px;
height: 0px;
border-radius: 50%;
box-shadow: 2px 2px 2px black;
/*transform:旋轉屬性(度數)
translateX:移動屬性*/
transform: rotate(30deg) translateX(500px) translateY(50px);
}

由上例可以看出,transform的作用。當然聯合過渡屬性來做,效果相對好一點兒。

熱門文章