CSS3中的變形處理(transform)屬

transform的功能分類

1.旋轉(zhuǎn)

transform:rotate(45deg);

該語(yǔ)句使div元素順時(shí)針旋轉(zhuǎn)45度。deg是CSS 3的“Values and Units”模塊中定義的一個(gè)角度單位。

2.縮放

transform:scale(0.8,1);

使用縮放的方法實(shí)現(xiàn)文字或圖像的縮放效果，在參數(shù)中指定縮放倍率。該語(yǔ)句使用scale方法使該元素在水平方向上縮小了20%，垂直方向上不縮放。

3.傾斜

transform:skew(30deg,0deg);

該實(shí)例通過(guò)skew方法把元素水平方向上傾斜30度，處置方向保持不變。

4.移動(dòng)

translate(50px,50px);

使用translate方法來(lái)將文字或圖像在水平方向和垂直方向上分別垂直移動(dòng)50像素。

指定變形的基準(zhǔn)點(diǎn)

在使用transform方法進(jìn)行文字或圖像的變形時(shí)，是以元素的中心點(diǎn)為基準(zhǔn)點(diǎn)進(jìn)行的。使用transform-orign屬性，可以改變變形的基準(zhǔn)點(diǎn)。

transorm-origin:left bottom;

left和bottom是基準(zhǔn)點(diǎn)在元素水平方向和垂直方向上的位置。

對(duì)一個(gè)元素使用多種變形方法

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

該綜合實(shí)例中對(duì)文字或圖像先旋轉(zhuǎn)45度，再縮放1.5倍，最后在水平方向移動(dòng)150像素，在垂直方向移動(dòng)200像素。

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

轉(zhuǎn)載于:https://www.cnblogs.com/langwo/p/7076616.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。