變換.jpg
單詞：
transform：變換、轉(zhuǎn)換骇塘、變形
origin：起源羊壹、源頭
perspective：透視
translate：移動(dòng)
scale：縮放
rotate：旋轉(zhuǎn)
skew：傾斜卫袒、斜切
transform屬性
定義：定義元素的變換。允許我們對(duì)元素進(jìn)行旋轉(zhuǎn)篙悯、縮放蚁阳、移動(dòng)或傾斜。
| 屬性值 | 描述 |
|---|---|
| none | 不進(jìn)行轉(zhuǎn)換 |
| translateX() | 定義轉(zhuǎn)換鸽照，只是用 X 軸的值螺捐。水平 |
| translateY() | 定義轉(zhuǎn)換，只是用 Y 軸的值矮燎。垂直 |
| translateZ() | 定義 3D 轉(zhuǎn)換定血，只是用 Z 軸的值。 |
| rotateX(angle) | 定義沿著 X 軸的 3D 旋轉(zhuǎn)诞外。 |
| rotateY(angle) | 定義沿著 Y 軸的 3D 旋轉(zhuǎn)澜沟。 |
| rotateZ(angle) | 定義沿著 Z 軸的 3D 旋轉(zhuǎn)。 |
| scaleX(x) | 通過設(shè)置 X 軸的值來定義縮放轉(zhuǎn)換峡谊。 |
| scaleY(y) | 通過設(shè)置 Y 軸的值來定義縮放轉(zhuǎn)換茫虽。 |
| scaleZ(z) | 通過設(shè)置 Z 軸的值來定義 3D 縮放轉(zhuǎn)換刊苍。 |
| rotateX(angle) | 定義沿著 X 軸的 3D 旋轉(zhuǎn)。 |
| rotateY(angle) | 定義沿著 Y 軸的 3D 旋轉(zhuǎn)濒析。 |
| rotateZ(angle) | 定義沿著 Z 軸的 3D 旋轉(zhuǎn)正什。 |
| skew(x-angle,y-angle) | 定義沿著 X 和 Y 軸的 2D 傾斜轉(zhuǎn)換。 |
| skewX(angle) | 定義沿著 X 軸的 2D 傾斜轉(zhuǎn)換悼枢。 |
| skewY(angle) | 定義沿著 Y 軸的 2D 傾斜轉(zhuǎn)換埠忘。 |
變換屬性
| 屬性 | 描述 |
|---|---|
| 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í)是否可見。 |
translate()函數(shù)
定義：translate()函數(shù)用于對(duì)元素進(jìn)行移動(dòng)變換渠驼。
語法
div{
transform:translateX(); /*水平*/
transform:translateY(); /*垂直*/
transform:translateZ();
}
perspective
perspective：透視的意思
定義：定義Z軸原點(diǎn)到屏幕的距離蜈块。開啟3D空間上下文。(Z軸是垂直屏幕的軸)
特征：大透視小變換迷扇；小透視大變換百揭。
語法
父元素{
perspective:none | px
}
屬性值：
none：不開啟透視。默認(rèn)值
px：最小1px
透視
透視指在平面上描繪物體的的空間關(guān)系方法
透視的特點(diǎn)：
近大遠(yuǎn)小
近快遠(yuǎn)慢
近實(shí)遠(yuǎn)虛
