CSS Transform（上：2D Transform）

前言及Transform 基本介紹

MDN官方文檔介紹：CSS中transform 屬性允許你修改CSS可視化模型的坐標空間。通過transform，可以讓元素進行移動（translate）、旋轉（rotate）、縮放（scale）、拉伸（skew）。本文主要介紹2D transform的基本用法及其屬性的原理。

瀏覽器兼容性

• Internet Explorer 10、Firefox、Opera 支持 transform 屬性
• Internet Explorer 9 支持替代的 -ms-transform 屬性（僅適用于 2D 變換）。
• Safari 和 Chrome 支持替代的 -webkit-transform 屬性（3D 和 2D 變換）。
• Opera 只支持 2D 變換。

屬性

skew

• transform: skew(ax,ay)元素在X軸和Y軸負方向以指定的角度拉伸
• transform: skew(ax)元素在X軸負方向以指定的角度拉伸
• transform: skewX(ax)在X軸負方向以指定的角度拉伸
• transform: skewY(ay)在Y軸負方向以指定的角度拉伸
  ax為x方向的角度，ay為y方向的角度，如：
• transform: skew(20deg, 20deg);
• transform: skew(2rad, 1.8rad);
• transform: skew(20deg);
• transform: skew(-20deg)
  demo在此

rotate
繞著Transform-origin點順時針旋轉，中心點初始值為50% 50%

• transform: rotate(<angle>)
• transform: rotate('a'turn)角度為'a' * 360°，'a'為小于1的數。例如transform: rotate(0.5turn)即transform: rotate(180deg)

demo在此

目前Chrome 38+/ Opera 25+ ，我們還可以使用calc() 屬性，例如transform: rotate(calc(0.25turn - 30deg))

skew和rotate的異同：

• 接受的參數單位都是角度,如20deg，1rad；
• skew接受兩個參數或一個參數，rotate的語法是：transform: rotate(<angle>);
• skew會使元素變形，rotate不會

translate

• transform:translate(tx[, ty])在X軸\Y軸平移指定距離，用向量[tx, ty]完成2D平移，若沒有ty則默認為0
• transform:translateX(tx)沿X軸正方向平移指定距離
• transform:translateY(ty)沿Y軸正方向平移指定距離
  tx\ty的單位可以為px\百分比。
  demo在此

scale

• transform: scale(sx[, sy]);由[sx, sy]描述指定一個二維縮放操作。如果sy 未指定，默認認為和sx的值相同。
• transform: scaleX(sx);使用向量[sx, 1] 完成在X方向上的縮放.
• transform: scaleY(sy);使用向量[1, sy] 完成在Y方向的縮放.
  以transform-origin（初始值為50% 50%）為中心點進行縮放，向量坐標值大于1或小于-1時，在相應方向放大，坐標值處于區間（-1, 1）時縮小，值為1時不做變化。如果縮放向量的兩個坐標是相等的，那么X和Y方向的縮放是均等的，所以元素的形狀被保持。
  demo在此

ps: transform: scale(-1)可以實現180°鏡像對稱效果

matrix

• 語法：transform: matrix(a, c, b, d, tx, ty)

• a, c, b, d是一個二維矩陣:
  ┌ a b ┐
  └ c d ┘
  tx, ty就是基于X和Y坐標重新定位元素。

• 用法：設變換的中心點為（x，y）,長度值tx、ty創建向量[tx,ty]，a,b,c,d,tx,ty創建矩陣

  
  

變換后的中心點坐標(x’, y’)

Multiple values 同時使用多個屬性

如```
.element{
width: 100px;
height: 200px;
transform: scale(2) skew(-20deg);
}

[demo](http://codepen.io/cruyun/pen/zZwWgP)
[CSS Tricks](https://css-tricks.com/almanac/properties/t/transform/) 提到：It’s worth noting that there is an order in which these transforms will be carried out, in the example above `skew` will be performed first and then the element will be scaled.

##Matrix與skew、scale、rotate、translate
**skew與matrix**、
`transform: matrix(1 tan(θy) tan(θx) 1 0 0)`的變換效果等同于`transform: skew( α + θx,  β + θy)`
設元素的原坐標為(x, y)，進行matrix變換：![](http://upload-images.jianshu.io/upload_images/4938344-242de94fa8b90ce1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

變換后的橫坐標x' = x+y*tan(θx) ，縱坐標y' = x*tan(θy)+y

**scale與matrix**
`transform: matrix(sx 0 0 sy 0 0)`的變換效果等同于 `transform: scale(sx, sy)`
設元素的原坐標為(x, y)，進行matrix變換：![](http://upload-images.jianshu.io/upload_images/4938344-5d205362d2069c34.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
變換后的元素坐標為(sx * x; sy * y)，即x和y變為原來的sx、sy倍。

**rotate與matrix**
`transform: matrix(cosα sinα -sinα cosα 0 0)`的變換效果等同于`transform: rotate(α)`
設元素的原坐標為(x, y)，進行matrix變換：![](http://upload-images.jianshu.io/upload_images/4938344-30b97e0090aae128.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
變換后的橫縱坐標分別為x' = x * cosα - y * sinα, y' = x * sinα + y * cosα

**translate與matrix**
`transform: matrix(1 0 0 1 tx ty)`的變換效果等同于`transform: translate(tx, ty)`,上文已證。