資訊專欄INFORMATION COLUMN
摘要：屬性決定元素如何定位，通過實現位置的改變默認值，元素按照標準流的方式正常排列。絕對定位，不受父元素父容器限制。可以設置元素的疊加順序，但依賴定位屬性大的元素會覆蓋小的元素為的元素不參與層級比較為負值，元素被普通流中的元素覆蓋
?
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為負值，元素被普通流中的元素覆蓋；
?
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1071.html
摘要：在動畫過程中，您能夠多次改變這套樣式。以百分比來規定改變發生的時間，或者通過關鍵詞和，等價于和。為了獲得最佳的瀏覽器支持，您應該始終定義和選擇器。注釋請使用動畫屬性來控制動畫的外觀，同時將動畫與選擇器綁定。CSS3 被劃分為模塊 其中最重要的 CSS3 新增實用模塊包括： 背景和邊框 文本效果 2D/3D 轉換 動畫 多列布局 用戶界面 CSS3 邊框: 用于創建圓角 border...
摘要：前端最基礎的就是。類同于標簽將對象作為彈性伸縮盒顯示。定義了一條立方貝塞爾曲線。是，表示終止時間和終止狀態。動畫過渡可以理解為兩個關鍵幀的補間操作。往期前端培訓初級階段后記年月日更新。參考資料引用培訓目錄出處已備份到筆記速查視差滾動 前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTM...
摘要：前端最基礎的就是。類同于標簽將對象作為彈性伸縮盒顯示。定義了一條立方貝塞爾曲線。是，表示終止時間和終止狀態。動畫過渡可以理解為兩個關鍵幀的補間操作。往期前端培訓初級階段后記年月日更新。參考資料引用培訓目錄出處已備份到筆記速查視差滾動 前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTM...
摘要：硬件加速是指應用的圖形性能對瀏覽器中的一些圖形操作交給來完成，因為是專門為處理圖形而設計，所以它在速度和能耗上更有效率。 在實習做一個移動項目的時候，實現一個動畫效果，在 iPhone 和 Chrome 上調試沒有問題，在千元左右的 Android 機上測試問題就很大了，卡頓非常明顯，百思不得其解，吐血，卒。 這個悲傷的故事就是本文的引子，真真切切的體會到了 CSS 對用戶體驗的影響非...
閱讀 2474·2021-11-16 11:45
閱讀 2444·2021-10-11 10:59
閱讀 2251·2021-10-08 10:05
閱讀 3816·2021-09-23 11:30
閱讀 2370·2021-09-07 09:58
閱讀 790·2019-08-30 15:55
閱讀 773·2019-08-30 15:53
閱讀 1923·2019-08-29 17:00
