簡介:transform(變形)是CSS3制作動畫的其中一個屬性,主要包括以下這幾種類型,分別是:rotate(旋轉)、skew(扭曲)、scale(縮放)和translate(移動)。下面介紹主要用法。
1.rotate(旋轉) 用法為:transform:rotate(數字+deg);rotate的參數是度數,即指定對象旋轉的度數,為正數表示順時針旋轉,為負數表示逆時針旋轉,transform:rotate(30deg);表示順時針旋轉30deg,旋轉基點為對象中心點。
2.translate(移動) 用法為:transform:translate(x,y),參數x,y分別表示水平和垂直兩個方向分別移動的距離,為負數是表示反方向移動,若只寫一個參數則表示x和y方向移動距離相同,即平移。還有translateX和translateY分別表示水平和垂直方向單向移動。移動基點為對象中心點。
3.scale(縮放) 用法為:scale(a,b),兩個參數分別表示水平和垂直方向的縮放倍數,大于0,以1為基準,小于1表示縮小,大于1表示放大,若只有一個參數則表示兩個值相同。scaleX和scaleY分別表示水平和縱向的縮放倍數。縮放基點為對象中心點。
4.skew(扭曲) 用法為:skew(數字+deg,數字+deg)參數分別表示x和y方向的扭曲度數,注意與前面兩個不同的是,skew的第二個參數若沒設置,表示y方向的扭曲度數為0deg。skewX和skewY分別表示x和y方向的扭曲度數。扭曲基點為對象中心。
在上面的4種類型中都有強調形變的基點為對象的中心點,當然我們也可以根據想要的效果來設置對象的形變基點,通過transform-origin:(x,y)屬性來設置,它的參數為坐標,其中x和y的值可以是百分值,em,px,其中x也可以是字符參數值left,center,right;y也可以是top,center,bottom。
下面是個小練習:
<!DOCTYPE html><html><head> <title>transform的練習</title> <style> html,body { margin: 0; padding: 0; } .demo-parent { width: 100%; height: 700px; background: black; position: fixed; display: flex; flex-direction:row; justify-content: center; padding-top: 300px; } .demo1 { background: red; width: 50px; height: 50px; } .demo1:hover { transform: rotate(30deg); } .demo2 { background: blue; width: 50px; height: 50px; } .demo2:hover { transform: translate(30px,200px); } .demo3 { background: yellow; width: 50px; height: 50px; } .demo3:hover { transform: scale(0.5); } .demo4 { background: green; width: 50px; height: 50px; } .demo4:hover { transform: skew(20deg,25deg); } </style></head><body><div class="demo-parent"> <div class="demo1"></div> <div class="demo2"></div> <div class="demo3"></div> <div class="demo4"></div></div></body></html>效果如圖:  目前只是簡單的動畫,最終樣子之后再做完善。
 目前只是簡單的動畫,最終樣子之后再做完善。
新聞熱點
疑難解答