在CSS3中,可以利用transform功能來實現文字或圖像的旋轉、縮放、傾斜、移動這四種類型的變形處理


CSS3中的變形處理(transform)屬

transform的功能分類

1.旋轉

CSS3中的變形處理(transform)屬性,PS教程,思緣教程網

transform:rotate(45deg);

該語句使div元素順時針旋轉45度。deg是CSS 3的“Values and Units”模塊中定義的一個角度單位。

2.縮放

CSS3中的變形處理(transform)屬性,PS教程,思緣教程網

transform:scale(0.8,1);

使用縮放的方法實現文字或圖像的縮放效果,在參數中指定縮放倍率。該語句使用scale方法使該元素在水平方向上縮小了20%,垂直方向上不縮放。

3.傾斜

CSS3中的變形處理(transform)屬性,PS教程,思緣教程網

transform:skew(30deg,0deg);

該實例通過skew方法把元素水平方向上傾斜30度,處置方向保持不變。

4.移動

CSS3中的變形處理(transform)屬性,PS教程,思緣教程網

translate(50px,50px);

使用translate方法來將文字或圖像在水平方向和垂直方向上分別垂直移動50像素。

指定變形的基准點

CSS3中的變形處理(transform)屬性,PS教程,思緣教程網

在使用transform方法進行文字或圖像的變形時,是以元素的中心點為基准點進行的。使用transform-orign屬性,可以改變變形的基准點。

transorm-origin:left bottom;

left和bottom是基准點在元素水平方向和垂直方向上的位置。

對一個元素使用多種變形方法

CSS3中的變形處理(transform)屬性,PS教程,思緣教程網

transform:rotate(45deg) scale(1.5) translate(50px,0px);

該綜合實例中對文字或圖像先旋轉45度,再縮放1.5倍,最后在水平方向移動150像素,在垂直方向移動200像素。

目前transform屬性在WebKit引擎的Web瀏覽器上需要添加“-webkit-”前綴,在Fifefox瀏覽器需要添加“-moz-”前綴,Opera瀏覽器上需要需要添加“-o-”前綴


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2024 CODEPRJ.COM