標籤：
css3---2D轉換
css3中出現了許多新的特性，其中2D轉換我覺的非常有意思，通過她，我們能夠對元素進行移動、縮放、轉動、拉長或者展開，所以希望在這裡和大家分享以下。
這裡，我將會介紹到以下轉換方法：
首先，我們先插入一個簡單的html代碼
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Css3的2D轉換</title><style type="text/css">*{margin:0;padding:0;}#picture{width：100%;height:500px;background:#ccc;}img{margin:100px 0 0 100px;}</style></head><body><div id="picture"><img src="mary.gif" alt="This is a picture" ></div></body></html>
這段代碼我們可以實現在一個div裡放一張圖片，通過這張圖片以便於向大家介紹以下方法。
1.translate（）方法：這個方法裡可以有兩個參數，中間用分號隔開，分別表示沿著X軸和Y軸移動的距離，這個距離是相對於該圖片的移動距離，且向右為Y軸的正方向，向下為X軸的正方向。下面的代碼錶示將圖片向右移動100px，向下也移動100。
img{margin:100px 0 0 100px; transform:translate(100px,100px); }
2.rotate()方法：這個方法裡有一個參數，表示要旋轉的度數，正數表示順時針旋轉，那麼負數就表示逆時針旋轉了。在要旋轉的度數後面添加deg （即degree，度數的意思）。以下代碼錶示將圖片順時針旋轉50°。
img{margin:100px 0 0 100px; transform:rotate(50deg);｝
3.scale()方法：這個方法裡有兩個參數，沒有單位。分別表示寬度和高度放大或縮小的倍數，如果大於1表示放大；如果小於一表示縮小。以下代碼錶示將圖片的寬度和高度都放大兩倍。
img{margin:100px 0 0 100px; transform:scale(2,2);}
4.skew（）方法：有兩個參數，分別表示沿著X軸和Y軸傾斜轉換，單位同樣是deg，表示角度。這個方法不是很容易理解。首先給出下列代碼：
img{margin:100px 0 0 100px;transform:skew(20deg,0deg);｝
表示將圖片沿著x軸逆時針旋轉20度。
這是沒有使用skew（）方法的樣子
這是使用了skew（）方法之後的樣子。
為什麼呢？這是因為其x軸和Y軸的方向是這樣的：
當x軸旋轉20°時會將圖片進行逆時針旋轉，但是請注意：這裡不是真正意義上的旋轉，而有展開傾斜的意思，旋轉之後，它的寬度並沒有改變，並且做一條垂線可以發現高也是沒有改變的。
對於Y軸方向的旋轉是一樣的：
img{margin:100px 0 0 100px;transform:skew(0deg,20deg);｝
上面的代碼錶示將圖片沿著Y軸方向旋轉了20°。
旋轉之後，就是下面這樣了：它是沿著順時針方向旋轉的。
如果，我們對x和y軸都旋轉呢？
img{margin:100px 0 0 100px;transform:skew(20deg,20deg);｝
那麼最終就是綜合作用的效果了，如所示：
說了這麼多，大家有沒有發現我們每次位移，旋轉，傾斜，放大和縮小是相對於哪個點呢？
如果你稍微細心的話，就會發現是相對於中心點。這裡就要用到tansform-origin屬性了。
即通過這個屬性，我們可以規定這些方法通過哪一個點作為原點。首先舉幾個例子。
transform-origin：0 0；表示以左上方為原點。
transform-origin：100% 0；表示以右上方為原點
transform-origin：0 100%；表示以左下角為原點
transform-origin：100% 100%；表示以右下角為原點
於是我們可以得知，這些值的設定是以左上方為基點的，向右為x軸的正方向，向下為y軸的正方向。如果不設定這個屬性，那麼預設值為
transform-origin:50% 50%;即以中心作為變換的基點。
ok，css3之2d轉換就講到這裡了。
css3之2D轉換
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
