導(dǎo)讀
- 變化屬性
單詞
- transform 變換饱普、轉(zhuǎn)換运挫、變形
- origin：起源、源頭
- perspective：透視
- translate：移動（本意是翻譯）
- scale：縮放
- rotate：旋轉(zhuǎn)
- skew：傾斜套耕、斜切
transform屬性
定義：定義元素的變換谁帕。允許你移動、旋轉(zhuǎn)冯袍、縮放匈挖、傾斜碾牌。
translate()函數(shù)
定義：translate()函數(shù)用于對元素進(jìn)行移動變換。
div{
transform: translateX();
transform: translateY();
transform: translateZ();
}
perspective
定義：定義Z軸原點到屏幕的距離儡循。開啟3D空間上下文舶吗。（Z軸是垂直屏幕的軸）
特征：大透視小變換；小透視大變換择膝。
語法
父元素{
perspective: none | px | em ;
}
屬性值：
- none：不開啟透視誓琼。默認(rèn)值
-- 長度值：
通過使用 CSS transform 屬性，您可以利用以下2D 轉(zhuǎn)換方法：
translate(x,y) 定義 2D 轉(zhuǎn)換肴捉，(沿著 X 和 Y 軸移動元素腹侣。)
translateX(n) 定義 2D 轉(zhuǎn)換，(沿著 X 軸移動元素齿穗。)
translateY(n) 定義 2D 轉(zhuǎn)換傲隶，(沿著 Y 軸移動元素。)
scale(x,y) 定義 2D 縮放轉(zhuǎn)換窃页，(改變元素的寬度和高度跺株。)
scaleX(n) 定義 2D 縮放轉(zhuǎn)換，(改變元素的寬度脖卖。)
scaleY(n) 定義 2D 縮放轉(zhuǎn)換乒省，(改變元素的高度。)
skew(x-angle,y-angle) 定義 2D 傾斜轉(zhuǎn)換胚嘲，(沿著 X 和 Y 軸作儿。)
skewX(angle) 定義 2D 傾斜轉(zhuǎn)換，(沿著 X 軸馋劈。)
skewY(angle) 定義 2D 傾斜轉(zhuǎn)換攻锰，(沿著 Y 軸。)
rotate(angle) 定義 2D 旋轉(zhuǎn)妓雾，(在參數(shù)中規(guī)定角度娶吞。)
透視
透視指在平面上描繪物體的空間關(guān)系的方法。
透視的特定：
1.近大遠(yuǎn)小
2.近快遠(yuǎn)慢
3.近實遠(yuǎn)虛
變形屬性
- transform 向元素應(yīng)用3D 轉(zhuǎn)換械姻。
- transform-origin 允許你改變被轉(zhuǎn)換元素的位置妒蛇。
- transform-style 規(guī)定被嵌套元素如何在 3D 空間中顯示。
- perspective 規(guī)定 3D 元素的透視效果楷拳。
- perspective-origin 規(guī)定 3D 元素的底部位置绣夺。
- backface-visibility 定義元素在不面對屏幕時是否可見。
記住z軸；兑尽Ｌ账！！ 垂直屏幕的軸
1.jpg
