CSS3中的變形處理(transform)屬
transform的功能分類
1.旋轉
transform:rotate(45deg);
該語句使div元素順時針旋轉45度。deg是CSS 3的“Values and Units”模塊中定義的一個角度單位。
2.縮放
transform:scale(0.8,1);
使用縮放的方法實現文字或圖像的縮放效果,在參數中指定縮放倍率。該語句使用scale方法使該元素在水平方向上縮小了20%,垂直方向上不縮放。
3.傾斜
transform:skew(30deg,0deg);
該實例通過skew方法把元素水平方向上傾斜30度,處置方向保持不變。
4.移動
translate(50px,50px);
使用translate方法來將文字或圖像在水平方向和垂直方向上分別垂直移動50像素。
指定變形的基准點
在使用transform方法進行文字或圖像的變形時,是以元素的中心點為基准點進行的。使用transform-orign屬性,可以改變變形的基准點。
transorm-origin:left bottom;
left和bottom是基准點在元素水平方向和垂直方向上的位置。
對一個元素使用多種變形方法
transform:rotate(45deg) scale(1.5) translate(50px,0px);
該綜合實例中對文字或圖像先旋轉45度,再縮放1.5倍,最后在水平方向移動150像素,在垂直方向移動200像素。
目前transform屬性在WebKit引擎的Web瀏覽器上需要添加“-webkit-”前綴,在Fifefox瀏覽器需要添加“-moz-”前綴,Opera瀏覽器上需要需要添加“-o-”前綴