CSS3 2D 轉換

先看兼容性

?

transform屬性向應用元素應用2d 或者 3d裝換；該屬性允許我們進行旋轉，縮放，移動或者傾斜；

基本語法：

transform: none|transform-functions;
transform-function：這東東有n的函數可以使用，我先來了解常用的；

? rotate(angle)

通過制定角度參數來對原元素指定一個2d的旋轉，不過先要設置transform-origin；

它表示旋轉的基點；angle設置為正數則順時針，為負數則表示逆時針；

css：

.demo{height:80px;width:200px;position:absolute;top:50px;background:green;-ms-transform:rotate(7deg);-moz-transform:rotate(7deg);-webkit-transform:rotate(7deg);-o-transform:rotate(7deg); }

效果：

?

(默認的它是以自己中心為基點開始旋轉滴呀,可以通過改變transform-origin來改變他的值滴呀)

transform-origin屬性值可以是百分比、em、px等具體的值，也可以是top、right、bottom、left和center這樣的關鍵詞。

CSS變形進行的旋轉、移位、縮放等操作都是以元素自己中心（變形原點）位置進行變形的。但很多時候需要在不同的位置對元素進行變形操作，

我們就可以使用transform-origin來對元素進行原點位置改變

下圖中的紅點代表中旋轉的基點：

?

?

還有更多關于transform-origin的基礎知識，我們稍后再總結，我們先對transform有一個總體的認識。

接下來時我們的

Ttranslate（x,y）

?TranslateX(x,y)水平方向和垂直方向上的移動，

?TranslateX(x)；僅水平方向上的移動;

?TranslateY(y)僅垂直方向上的移動；

距離的我們看實例；

Css:

*{color:white; } .or{height:80px;width:160px;float:left;background:green; } .demo{height:80px;width:160px;float:left;background:green;transform:translate(200px,0px);-ms-transform:translate(200px,0px);-moz-transform:translate(200px,0px);-webkit-transform:translate(200px,0px);-o-transform:translate(200px,0px); }

效果：

?

縮放scale（x,y）

? scale(x,y)使元素水平方向和垂直方向同時縮放（也就是X軸和Y軸同時縮 放）；

? scaleX(x)元素僅水平方向縮放（X軸縮放）

? scaleY(y)元素僅垂直方向縮放（Y軸縮放）??

? 其中 心點就是元素的中心位置，縮放基數為1，如果其值大于1元素就放大，反之其值小于1，元素縮小

? ?css代碼：

??

*{color:white; } .or{height:80px;width:160px;float:left;background:green; } .demo{height:80px;width:160px;float:left;background:green;transform:scale(2,2);-ms-transform:scale(2,2);-moz-transform:scale(2,2);-webkit-transform:scale(2,2);-o-transform:scale(2,2); } .demo1{height:80px;width:160px;float:left;background:red;transform:scaleX(2);-ms-transform:scaleX(2);-moz-transform:scaleX(2);-webkit-transform:scaleX(2);-o-transform:scaleX(2); } .demo2{height:80px;width:160px;float:left;background:black;transform:scaleY(2);-ms-transform:scaleY(2);-moz-transform:scaleY(2);-webkit-transform:scaleY(2);-o-transform:scaleY(2); }

? 效果：（這里你還發現，雖然div被放大了，但是它原有的占位并沒有變化）

? ??

?

扭曲skew(xy,)

skew(x,y)使元素在水平和垂直方向同時扭曲（X軸和Y軸同時按一定的角度值 進行扭曲變形）；

skewX(x)僅使元素在水平方向扭曲變形（X軸扭曲變形）；

skewY(y)僅使元素在垂直方向扭曲變形（Y軸扭曲變形）；

?

*{color:white; } .or{height:80px;width:160px;float:left;background:green; } .demo{height:80px;width:160px;float:left;background:green;transform:skewX(30deg);-ms-transform:skewX(30deg);-moz-transform:skewX(30deg);-webkit-transform:skewX(30deg);-o-transform:skewX(30deg); } .demo1{height:80px;width:160px;float:left;background:red;transform:skewY(10deg);-ms-transform:skewY(10deg);-moz-transform:skewY(10deg);-webkit-transform:skewY(10deg);-o-transform:skewY(10deg); } .demo2{height:80px;width:160px;float:left;background:black;transform:skew(30deg,10deg);-ms-transform:skew(30deg,10deg);-moz-transform:skew(30deg,10deg);-webkit-transform:skew(30deg,10deg);-o-transform:skew(30deg,10deg); }

?

效果：

?

?

?

?

以往我們疊加效果都是用逗號(“，”)隔開，但在transform中使用多個transform-function時卻需要有空格隔開。

最后我們再來看一個綜合實例：

?

?

這里還有其他額一些transform，我們后期再來總結；

?

?

轉載于:https://www.cnblogs.com/mc67/p/5242603.html

總結

以上是生活随笔為你收集整理的CSS3 2D 转换的全部內容，希望文章能夠幫你解決所遇到的問題。

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