transform 變形屬性屬性:translate 平移,rotate 旋轉, scale 縮放,skew 傾斜 ◆ translate :指定對象的2D平移第一個參數對應X軸,第二參數對應Y軸;如果第二個參數未提供,則預設為0;translate(10px,10px)X軸 往左邊移動 對應第一個 ...
transform 變形屬性
屬性:translate 平移,rotate 旋轉, scale 縮放,skew 傾斜
◆ translate :指定對象的2D平移
第一個參數對應X軸,第二參數對應Y軸;如果第二個參數未提供,則預設為0;
translate(10px,10px)
X軸 往左邊移動 對應第一個參數的值 就是正數值。
Y軸 往下麵移動 對應第二個參數的值 就是正數值。
◆ rotate :控制對象的2D旋轉,需要先定義transform-origin屬性;
列:Rotate(90deg),transform-origin:0 0;
角度值 為 正數值 對象順時針轉,負數對象逆時針轉;
transform-origin 如果不設置坐標,預設元素對象的中心點。
transform-origin:0 0; 以元素的左上角為中心點旋轉;
◆ scale: 指對象的2D縮放。可以同transform-origin 一起使用。
第一個參數對應X軸 ;第二個參數對應Y軸;如果第二個參數未提供預設取第一個參數的值;
例如:scale(0.5,0.5);
參數值 為 1 時,不縮放,小於1時往裡面縮小;大於1時,往大放。
配合transform-origin使用時,是沿著中心點縮放。
◆ skew : 指定對象斜切;
第一個參數對應軸,第二個參數對應Y軸;,如果第二個參數未提供預設為0;
例如:skew(50deg,2deg);
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
◆ 3D
◆ style : 樣式,變形樣式;
transform-style:preserve-3d; 此設置3D變形效果;
X軸正方嚮往左邊;Y軸正方嚮往下麵;Z軸正方向面向屏幕前面,指向我們。
translateX(x px) ;X軸平移
translateY(y px) ;Y軸平移
translateZ(z px) ;Z軸平移
rotateX(x deg) ;沿著X軸進行旋轉
rotateY(y deg) ;沿著Y軸進行旋轉
rotateZ(z deg) ;沿著Z軸進行旋轉
◆旋轉中心設置:transform-origin
X軸 可設置為:left 或 center 或 right;
Y軸 可設置為:top 或 center 或 bottom;
Z軸 可設置為:length px; 具體長度;
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
◆ transition 過度動畫處理
transition:<過渡屬性名稱><過渡時間><過渡模式>
屬性:property ,duration,timing-funciton,delay;
property : 檢索或設置對象中的參與過渡的屬性;設置原始的那些屬性參與動畫。
duration : 過渡動畫的持續時間;
timing-function : 檢索或設置對象中過渡的動畫類型(
linear : 動畫從頭到尾的速度是相同的,
ease : 動畫以低速開始,然後加快,在結束前變慢,
ease-in : 動畫以低速開始,
ease-out : 動畫以低速結束,
ease-in-out : 動畫以低速開始和結束
)
delay : 設置對象延遲過渡的時間。
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
◆ position 屬性決定元素如何定位,通過top,bottom,left,right實現位置的改變;
static:預設值,元素按照標準流的方式正常排列。
*-*-*-*-*-*-*-*-*-*-*-
relative:相對定位,相對元素自身原始位置,通過 top,bottom,left,right實現位置定位;
當處於父級容器中時,相對父級容器內,本身位置作為標準,通過 top,bottom,left,right進行定位;
*-*-*-*-*-*-*-*-*-*-*-
absolute:絕對定位,相對瀏覽器視窗的定位。
當父元素 是absolute定位或者relative時,那麼子元素是按父元素進行absolute絕對定位。
當父容器沒有定位,那麼子元素按瀏覽器視窗進行定位。
*-*-*-*-*-*-*-*-*-*-*-
fixed:絕對定位,不受父元素父容器限制。
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
z-index
可以設置元素的疊加順序,但依賴定位屬性
z-index 大的元素會覆蓋z-index小的元素
z-index為auto的元素不參與層級比較;
z-index為負值,元素被普通流中的元素覆蓋;