2d、3d
轉換 （1
）通過2d、3d
轉換，我們能夠對元素進行移動、縮放、轉動、拉長、拉伸。轉換是使元素改變形狀、尺寸和位置的一種效果，可以使用2d或
3d轉換來轉換元素 （
2）2d（
transform
屬性）轉換方法的值
<1>translate(
水平移動 垂直移動
)：移動
<2>rotate(
數字+deg)
：旋轉角度值
<3>scale(
寬的縮放倍數，高的縮放倍數
)：縮放
<4>skew(向x
軸旋轉的角度，向
y軸旋轉的角度
)：扭曲
<5>matrix()
：矩陣 （3
）3d轉換方法
<1>rotatex(
數值+deg)：
<2>rotatey(
數值+deg)：
2、過渡：元素從一種樣式逐漸改變為另外一種的效果（需要規定效果新增到哪個
css屬性上，規定效果的時長） （
1）屬性
<1>transition
：簡寫屬性，用於在乙個屬性中設定四個過渡屬性
<2>transition-property
：規定應用過渡的
css屬性的名稱（必須要有這個屬性）
<3>transition-duration
：定義過渡效果花費的時間，預設是
0（必須要有這個屬性）
<4>transition-timing-function
：規定過渡效果的時間曲線。預設是
ease
取值：linear
：線性過渡
ease
：平滑過渡
ease-in
：由慢到快
ease-out
：由快到慢
ease-in-out
：由慢到快再到慢
<5>transition-delay
：規定過渡效果何時開始。預設是0
3、動畫：使元素從一種樣式逐漸變化為另一種樣式的效果 （
1）可以改變任意多的樣式任意多的次數 （
2from
」和「to
」，等同於0%和
100% 0%
是動畫的開始，
100%
是動畫的完成 （
3）屬性
<1>animation
：復合屬性。檢索或設定物件所應用的動畫特效
<2>animation-name
：檢索或設定物件所應用的動畫名稱
<3>animation-duration
：檢索或設定物件動畫的持續時間
<4>animation-timing-function
：檢索或設定物件動畫的過渡型別
<5>animation-delay
：檢索或設定對向動畫延遲的時間
<6>animation-iteration-count
：檢索或設定物件動畫的迴圈次數，其中
infinite
是無限迴圈
<7>animation-direction
：檢索或設定物件動畫在迴圈中是否反向運動
normal
：正常方向
alternate
：正常與反向交替 4
、多列（要加瀏覽器核心） （
1）屬性
<1>columns
：復合屬性，設定或檢索物件的列數和每列的寬度。
<2>column-width
：每列的寬度
<3>column-count
：列數
<4>column-gap
：列與列之間的間隙
<5>column-rule
：列與列之間的邊框，復合屬性
<6>column-rule-width
：列與列之間的邊框厚度
<7>column-rule-style
：列與列之間的邊框樣式
<8>column-rule-color
：列與列之間邊框顏色
CSS動畫效果
css變形效果 transform translate 平移 translate x,y translatex x translatey y 相對於元素原始位置平移。scale 縮放 大於1放大，小於1縮小。rotate 旋轉 單位 deg度 grad 梯度 rad 弧度 turn 轉 圈 tran...
CSS常用動畫效果
1.標題兩邊的小橫槓 標題 title before after 2.滑鼠手型 cursor屬性 a href input type submit input type image input type button label for select,button 3.小三角 下 bottom 上 ...
css卡片動畫效果
class layout container container fluid index select class index heading 選擇三道h2 專業實力與豐富經驗p div class select content row class select card class content...