transfrom:

translate() 方法

translate()方法，根據左(X軸)和頂部(Y軸)位置給定的引數，從當前元素位置移動。

(1) rotate() 方法

rotate()方法，在一個給定度數順時針旋轉的元素。負值是允許的，這樣是元素逆時針旋轉。

　　　　/*正值順時針*/ /*transform:rotate(30deg);*/ /*負值逆時針*/ transform:rotate(-30deg);

(2) skew() 方法

包含兩個引數值，分別表示X軸和Y軸傾斜的角度，如果第二個引數為空，則預設為0，引數為負表示向相反方向傾斜。

skewX(<angle>);表示只在X軸(水平方向)傾斜。

skewY(<angle>);表示只在Y軸(垂直方向)傾斜

(3) translate() 方法

translate()方法，根據左(X軸)和頂部(Y軸)位置給定的引數，從當前元素位置移動。

(4) scale() 方法

scale()方法，該元素增加或減少的大小，取決於寬度（X軸）和高度（Y軸）的引數：

scale（2,3）轉變寬度為原來的大小的2倍，和其原始大小3倍的高度。

scale(0)佔位置

css動畫定義

當在@keyframes建立動畫，把它繫結到一個選擇器（動畫的名稱），否則動畫不會有任何效果。

規定動畫的名稱，規定動畫的時長

請用百分比來規定變化發生的時間，或用關鍵詞 "from" 和 "to"，等同於 0% 和 100%。

0% 是動畫的開始，100% 是動畫的完成。

@keyframes
規定動畫。
animation
所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。
animation-name
規定 @keyframes 動畫的名稱。
animation-duration
規定動畫完成一個週期所花費的秒或毫秒。預設是 0。
animation-timing-function
規定動畫的速度曲線。預設是 "ease"。
animation-fill-mode
規定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式。
animation-delay
規定動畫何時開始。預設是 0。
animation-iteration-count

規定動畫被播放的次數。預設是 1。
animation-direction
規定動畫是否在下一週期逆向地播放。預設是 "normal"。
animation-play-state
規定動畫是否正在執行或暫停。預設是 "running"。

1. CSS3多列布局

CSS3 多列屬性
column-count
指定元素應該被分割的列數。
column-fill
指定如何填充列
column-gap
指定列與列之間的間隙
column-rule
所有 column-rule-* 屬性的簡寫
column-rule-color
指定兩列間邊框的顏色
column-rule-style
指定兩列間邊框的樣式
column-rule-width
指定兩列間邊框的厚度
columns
設定 column-width 和 column-count 的簡寫

佈局：

　　　　column-count:5; /*指定列與列之間的間隙*/ column-gap:10px; /*column-rule-邊框*/ column-rule-style:dotted; 　　　　顏色 column-rule-color:green; 　　　　寬度 column-rule-width:5px;

擴充：

animation-timing-function中的steps()函式
steps()是一個階躍函式，用於把整個操作領域切分為相同大小的間隔，每個間隔都是相等的。

語法：steps(number[, end | start])

引數說明：number引數指定了時間函式中的間隔數量（必須是正整數） 第二個引數是可選的，可設值：start和end，表示在每個間隔的起點或是終點發生階躍變化，如果忽略，預設是end。