首先，我們要想用css3來做乙個動畫，不可避免的要用到transform和animation這兩個屬性值。
首先呢，我們的transform的組合一共有5種，分別是：
transform：translate（）；
transform：rotate（）；
transform：scale（）；
transform：skew（）；
transform：matrick；
接下來我們說一下transform：translate（）；所代表的意義和用法。
意義：讓元素以當前位置向 x 、y軸進行移動。
#box這個**的意思是讓id名為box的元素分別沿著 x 軸和 y 軸移動100px（注意：兩個數值之間用逗號隔開）。如圖所示：移動前後的對比：
然後是rotate，它表示的是讓元素進行旋轉，裡面的數值可以為負，當裡面的數值為正數時，表示該元素順時針旋轉；為負數時，該元素以逆時針旋轉；單位可以是 deg 表角度（度數），rad 表弧度。例如
：#box 表示的就是 id 為 box 的元素旋轉 45° 角。如圖：旋轉前後對比圖
scale表示縮放，就是在元素的初始大小的基礎上面對元素進行放大或縮小。
使用方法：
transform：scale（num）；這個時候裡面的數值num表示同時放大或縮小該元素的寬和高。
transform：scale（num1 ， num2）；這個時候 scale 裡面有兩個數值，其中第乙個表示寬的值，第二個表示高的值。例如：
#box 這個**的意思是把 id 名為 box 的元素寬放大2倍，高放大3倍。如圖所示：對比前後
skew屬性表示斜切。transform：skew（num1 ，num2）；其中num1表示x，對 x 方向進行傾斜，意思是元素沿著 y 方向進行傾斜； num2表示y，同理，對 y 方向進行傾斜，元素沿著 x 軸方向進行傾斜；skew的單位是 「deg」；
例如**：#box
將會出現如圖所示的前後對比效果效果：
就是改變被轉換元素的基點位置。2d 轉換元素能夠改變元素 x 和 y 軸。3d 轉換元素還能改變其 z 軸。
注：該屬性必須與 transform 屬性一同使用。
分別表示的是：從左到右:動畫完成乙個週期所需要的時間；動畫開始前的延遲時間；動畫的名字；動畫的速度曲線；動畫完成的次數。
關鍵幀@keyframes + 動畫的名字
to{}
}其中 from 表示起點位置，等價於0%；to 表示終點位置，等價於 100%；
注：預設情況下，元素運動完畢後，會停留到起點位置。
下面是乙個球行在乙個物體裡面運動的動畫。
CSS3陰影屬性（逆戰班）
李小龍 box 文字陰影屬性 text shadow 6px 6px 3px orange 使用 第乙個值 水平方向的距離 必須有的 支援負值 第二個值 垂直方向的距離 必須有的 支援負值 第三個值 陰影的模糊程度 不支援負值 第四個值 陰影的顏色 注意 第乙個值 和 第二個值得位置不能互換 給同乙...
逆戰班 css3屬性 2d變換 漸變
位移 transform translate 旋轉 transform rotate 縮放 transform scale 傾斜 transform skew transform translate 水平位移,垂直位移 transform translate 水平位移 transform trans...
css3 flex彈性布局（逆戰班）
在學習前端的過程中，我們會接觸很多的布局樣式。這其中flex彈性布局大大加快了我們書寫頁面布局的速度，同時減少了很多任務作量。flex布局是w3c在2009年提出的一種新的方案，可以簡便 完整 響應式地實現各種頁面布局。其中，flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提...