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

在以前我們改變?cè)氐奈恢眯枰O(shè)置 left 、 right 這類的屬性，它對(duì)其它元素有很大的影響，現(xiàn)在通過(guò) transform 就可以實(shí)現(xiàn)任意空間的改變了。

1. 官方解釋

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

2. 慕課解釋

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

3. 語(yǔ)法

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

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

包含參數(shù)：

4. 實(shí)例

接下來(lái)我們都是對(duì) demo 這個(gè)元素進(jìn)行操作。

<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 對(duì)元素縮放：

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

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

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

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

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

效果圖

5. 使用 skew 對(duì)元素傾斜。

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

效果圖

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

效果圖

如果只是對(duì)一個(gè)方向斜切可以如下：

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

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

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

效果圖

5. 兼容性

6. 場(chǎng)景

1. 在需要?jiǎng)赢嬩秩靖淖冊(cè)匚恢脮r(shí)候。
2. 需要對(duì)場(chǎng)景進(jìn)行縮放或者旋轉(zhuǎn)時(shí)候。

7. 小結(jié)

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