transform 2D 平面轉(zhuǎn)換

在以前我們改變元素的位置需要設(shè)置 left 、 right 這類的屬性，它對其它元素有很大的影響，現(xiàn)在通過 transform 就可以實現(xiàn)任意空間的改變了。

1. 官方解釋

CSS transform 屬性允許你旋轉(zhuǎn)，縮放，傾斜或平移給定元素。這是通過修改 CSS 視覺格式化模型的坐標(biāo)空間來實現(xiàn)的。

2. 慕課解釋

transfrom 這個屬性可以改變一個目標(biāo)元素在頁面中的位置，例如相對原來元素所在的位置平移，相對原來的尺寸放大或者縮小，也可以旋轉(zhuǎn)或者斜切。

3. 語法

通用坐標(biāo)軸說明:

x 代表橫軸，y 代表縱軸。

包含參數(shù)：

4. 實例

接下來我們都是對 demo 這個元素進行操作。

<div class="demo"></div>

1. 使用 translate 讓元素位移。

.demo{
     transform: translate(40px,40px);
}

效果圖

2. 使用 translateX 讓元素水平位移：

.demo{
     transform: translateX(80px);
}

效果圖

3. 使用 translateY 讓元素在豎直方向上位移：

.demo{
     transform: translateY(40px);
}

效果圖

4. 使用 scale 對元素縮放：

.demo{
     transform: scale(.8,.8);
}

scale 接受一個倍數(shù)大于 1 時候放大，小于 1 時候縮小。當(dāng) x，y 參數(shù)的值一樣時，可以如下面這樣寫：

.demo{
     transform: scale(.8);
}

如果只需要對水平方向縮放，可以向下面這樣寫，豎直方向同理：

.demo{
     transform: scaleX(.8);
}

效果圖

5. 使用 skew 對元素傾斜。

.demo{
    transform:skew(30deg,0deg);
}

效果圖

.demo{
    transform:skew(0deg,30deg);
}

效果圖

如果只是對一個方向斜切可以如下：

.demo{
    transform:skewX(30deg);
}

6. rotate 使元素旋轉(zhuǎn)一個角度。在 2D 效果中它只接受一個參數(shù)角度，并沿著順指針方向開始。

.demo{
    transform:rotate(30deg);
}

效果圖

5. 兼容性

6. 場景

1. 在需要動畫渲染改變元素位置時候。
2. 需要對場景進行縮放或者旋轉(zhuǎn)時候。

7. 小結(jié)

1. 要分清 transform 和 transition，后者是過渡；
2. transform 可以使得元素位置改變，而不會影響其他圍繞元素，所以可以使用 transform 盡量使用，可以提高瀏覽器的渲染效率；
3. transform 中斜切的效果，我們拿 X 水平坐標(biāo)軸為例，其實就是底部向右移動一個角度，這個角度就是豎直方向偏移的角度。