了解單詞
- transform:變換投慈，轉(zhuǎn)換衣洁，變形
- origin：（窩瑞陳）允許你改變被轉(zhuǎn)換元素的位置郊丛。
- perspective：（破四潘科體悟）：規(guī)定 3D 元素的透視效果虫给。
- translate：（穿四累特）移動(dòng)（本意是翻譯）
- scale：（死給哦）縮放
- rotate：（肉tei的）旋轉(zhuǎn)
- skew：（四給吳）傾斜，斜切
變換屬性
|--|--|--|--|
| 屬性 | 描述 |
| transform | 向元素應(yīng)用 3D 轉(zhuǎn)換辫封。 |
| transform-origin | 允許你改變被轉(zhuǎn)換元素的位置硝枉。 |
| transform-style | 規(guī)定被嵌套元素如何在 3D 空間中顯示。 |
| perspective | 規(guī)定 3D 元素的透視效果倦微。 |
| perspective-origin | 規(guī)定 3D 元素的底部位置檀咙。 |
| backface-visibility | 定義元素在不面對(duì)屏幕時(shí)是否可見。 |
1.透視
透視指在平面上描述物體的空間關(guān)系的方法璃诀。
透視的特點(diǎn)：
1.近大遠(yuǎn)小
2.近快遠(yuǎn)慢
3.近實(shí)遠(yuǎn)虛
2.transform
定義：定義元素的變換：移動(dòng)弧可、旋轉(zhuǎn)指攒、縮放和傾斜四種鸦致。
移動(dòng)
屬性值：
- translate() ： translateX()和translateY()的簡(jiǎn)寫屬性值，第一個(gè)值沿X軸（水平軸）發(fā)生位置移動(dòng)瓤漏，第二個(gè)值沿Y軸（垂直軸）發(fā)生位置移動(dòng)凿将。
- translateX()：元素沿X軸（水平軸）發(fā)生位置移動(dòng)
- translateY()：元素沿Y軸（垂直軸）發(fā)生位置移動(dòng)
-
translateZ()：元素沿Z軸（垂直于屏幕的軸）發(fā)生位置移動(dòng)校套，translateZ() CSS函數(shù)沿著z軸在三維空間中重新定位元素,即,從觀察者的角度而言更近或者更遠(yuǎn)。這個(gè)變換是由一個(gè)<length>元素定義的,它指定元素向內(nèi)或向外移動(dòng)的距離牧抵。
div{ tramsform： translate() | translateX() | translateY() }
注：接受負(fù)值笛匙。
旋轉(zhuǎn)
單位：deg
- rotate()： 簡(jiǎn)寫屬性侨把，方法根據(jù)給指定的角度順時(shí)針或逆時(shí)針旋轉(zhuǎn)元素。
- rotateX()：元素沿X軸（水平軸）發(fā)生旋轉(zhuǎn)
- rotateY()：元素沿Y軸（垂直軸）發(fā)生旋轉(zhuǎn)
- rotateZ()：元素沿Z軸（垂直于屏幕的軸）發(fā)生旋轉(zhuǎn)
縮放
單位：deg
- scale()： 簡(jiǎn)寫屬性妹孙，進(jìn)行水平垂直雙向縮放秋柄。
- scaleX()：元素沿X軸（水平軸）進(jìn)行縮放
- scaleY()：元素沿Y軸（垂直軸）進(jìn)行縮放
- rotateZ()：縮放Z軸
斜切
單位：deg
- skew()： 簡(jiǎn)寫屬性，進(jìn)行水平垂直雙向斜切蠢正。
- skewX()：元素沿X軸（水平軸）進(jìn)行斜切
- skewY()：元素沿Y軸（垂直軸）進(jìn)行斜切
復(fù)合屬性matrix()
定義：matrix() 方法把所有 2D 變換方法組合為一個(gè)骇笔。
matrix() 方法可接受六個(gè)參數(shù)，其中包括數(shù)學(xué)函數(shù)嚣崭，這些參數(shù)使您可以旋轉(zhuǎn)笨触、縮放、移動(dòng)（平移）和傾斜元素雹舀。
參數(shù)如下：matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
示例：
div {
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
3.perspective
定義：定義Z軸原點(diǎn)到屏幕的距離芦劣。Z軸是垂直于屏幕的軸。（定義在父元素身上说榆。）
語(yǔ)法：
.container{
perspective: none;/*不開啟3D視角*/
perspective: 500px;/*坐標(biāo)原點(diǎn)距離屏幕的距離*/
}
屬性值：
none:不開啟透視 （默認(rèn)）
number ：開啟透視持寄，坐標(biāo)原點(diǎn)距離屏幕的距離，以像素為單位娱俺。最小值是1px，不可以取負(fù)值废麻。
注：大透視荠卷，小變換，小透視烛愧，大變換油宜。換而言之（number值越大，translateZ()函數(shù)的變換效果越不明顯怜姿。）
4.perspective-origin
定義：透視源：設(shè)置透視視角位置慎冤。
語(yǔ)法：
.container{
perspective-origin: left | bottom | top | right | center;
}
屬性值：
注：可以設(shè)置左上，右上沧卢，左下蚁堤，右下，中上但狭，中下等組合視角披诗。
