導讀
- 變化屬性
單詞
- transform 變換、轉換、變形
- origin：起源、源頭
- perspective：透視
- translate：移動（本意是翻譯）
- scale：縮放
- rotate：旋轉
- skew：傾斜、斜切
transform屬性
定義：定義元素的變換。允許你移動、旋轉、縮放、傾斜。
translate()函數
定義：translate()函數用于對元素進行移動變換。
div{
transform: translateX();
transform: translateY();
transform: translateZ();
}
perspective
定義：定義Z軸原點到屏幕的距離。開啟3D空間上下文。（Z軸是垂直屏幕的軸）
特征：大透視小變換；小透視大變換。
語法
父元素{
perspective: none | px | em ;
}
屬性值：
- none：不開啟透視。默認值
-- 長度值：
通過使用 CSS transform 屬性，您可以利用以下2D 轉換方法：
translate(x,y) 定義 2D 轉換，(沿著 X 和 Y 軸移動元素。)
translateX(n) 定義 2D 轉換，(沿著 X 軸移動元素。)
translateY(n) 定義 2D 轉換，(沿著 Y 軸移動元素。)
scale(x,y) 定義 2D 縮放轉換，(改變元素的寬度和高度。)
scaleX(n) 定義 2D 縮放轉換，(改變元素的寬度。)
scaleY(n) 定義 2D 縮放轉換，(改變元素的高度。)
skew(x-angle,y-angle) 定義 2D 傾斜轉換，(沿著 X 和 Y 軸。)
skewX(angle) 定義 2D 傾斜轉換，(沿著 X 軸。)
skewY(angle) 定義 2D 傾斜轉換，(沿著 Y 軸。)
rotate(angle) 定義 2D 旋轉，(在參數中規(guī)定角度。)
透視
透視指在平面上描繪物體的空間關系的方法。
透視的特定：
1.近大遠小
2.近快遠慢
3.近實遠虛
變形屬性
- transform 向元素應用3D 轉換。
- transform-origin 允許你改變被轉換元素的位置。
- transform-style 規(guī)定被嵌套元素如何在 3D 空間中顯示。
- perspective 規(guī)定 3D 元素的透視效果。
- perspective-origin 規(guī)定 3D 元素的底部位置。
- backface-visibility 定義元素在不面對屏幕時是否可見。
記住z軸?。?！ 垂直屏幕的軸
1.jpg
