問題?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的作用。當然聯合過渡屬性來做,效果相對好一點兒。