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-”前綴

轉載于:https://www.cnblogs.com/langwo/p/7076616.html

總結

以上是生活随笔為你收集整理的在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。