在CSS中,通過(guò)transform屬性可以實(shí)現(xiàn)元素的傾斜和移動(dòng)。
傾斜:
transform: skewX(30deg); /* 水平傾斜 */ transform: skewY(30deg); /* 垂直傾斜 */ transform: skew(30deg, 60deg); /* 同時(shí)進(jìn)行水平和垂直傾斜 */
其中的參數(shù)可以是正值或負(fù)值,表示傾斜的角度。
移動(dòng):
transform: translateX(50px); /* 水平移動(dòng) */ transform: translateY(50px); /* 垂直移動(dòng) */ transform: translate(50px, 100px); /* 同時(shí)進(jìn)行水平和垂直移動(dòng) */
同樣的,參數(shù)可以是正值或負(fù)值,表示移動(dòng)的距離。
傾斜和移動(dòng)可以同時(shí)進(jìn)行,寫(xiě)在一個(gè)transform屬性中:
transform: skewX(30deg) translateY(50px);
這樣的寫(xiě)法表示先進(jìn)行傾斜,再進(jìn)行移動(dòng)。