一、CSS3 新增屬性
（6）3D
（7）過渡
（8）動畫
（9）多列
二、CSS3 新增屬性詳解
2.6 3D屬性
2.6.1 transform
Transform屬性應用於元素的2D或3D轉換。這個屬性允許你將元素旋轉，縮放，移動，傾斜等。
語法
transform: none|transform-functions
| 值 | 描述 |
|---|---|
| none | 定義不進行轉換。 |
| matrix(n,n,n,n,n,n) | 定義 2D 轉換，使用六個值的矩陣。 |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定義 3D 轉換，使用 16 個值的 4x4 矩陣。 |
| translate(x,y) | 定義 2D 轉換。 |
| translate3d(x,y,z) | 定義 3D 轉換。 |
| translateX(x) | 定義轉換，只是用 X 軸的值。 |
| translateY(y) | 定義轉換，只是用 Y 軸的值。 |
| translateZ(z) | 定義 3D 轉換，只是用 Z 軸的值。 |
| scale(x[,y]?) | 定義 2D 縮放轉換。 |
| scale3d(x,y,z) | 定義 3D 縮放轉換。 |
| scaleX(x) | 通過設置 X 軸的值來定義縮放轉換。 |
| scaleY(y) | 通過設置 Y 軸的值來定義縮放轉換。 |
| scaleZ(z) | 通過設置 Z 軸的值來定義 3D 縮放轉換。 |
| rotate(angle) | 定義 2D 旋轉，在參數中規定角度。 |
| rotate3d(x,y,z,angle) | 定義 3D 旋轉。 |
| rotateX(angle) | 定義沿着 X 軸的 3D 旋轉。 |
| rotateY(angle) | 定義沿着 Y 軸的 3D 旋轉。 |
| rotateZ(angle) | 定義沿着 Z 軸的 3D 旋轉。 |
| skew(x-angle,y-angle) | 定義沿着 X 和 Y 軸的 2D 傾斜轉換。 |
| skewX(angle) | 定義沿着 X 軸的 2D 傾斜轉換。 |
| skewY(angle) | 定義沿着 Y 軸的 2D 傾斜轉換。 |
| perspective(n) | 爲 3D 轉換元素定義透視視圖。 |
2.6.2 transform-origin
transform-Origin屬性允許您更改轉換元素的位置。2D轉換元素可以改變元素的X和Y軸。 3D轉換元素，還可以更改元素的Z軸。
語法
transform-origin: x-axis y-axis z-axis;
2.6.3 transform--style
transform–style屬性指定嵌套元素是怎樣在三維空間中呈現。
語法
transform-style: flat|preserve-3d;
2.7 過渡
CSS3中，我們爲了添加某種效果可以從一種樣式轉變到另一個的時候，無需使用Flash動畫或JavaScript。2.7.1 transition
語法
transition: property duration timing-function delay
/* 將鼠標懸停在一個 div 元素上，逐步改變div的寬度從 100px 到 300px*/
div
{
width:100px;
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}
div:hover {width:300px;}
個人理解：
過渡主要是爲網頁中元素的變化提供可視化的過程，沒加過渡效果的時候，將div盒子的長增加將在瞬間完成，加了過渡效果以後，這個增長的過程將會變得緩慢，用戶可以直觀看到。
2.8 動畫
CSS3 可以創建動畫，它可以取代許多網頁動畫圖像、Flash 動畫和 JavaScript 實現的效果2.8.1 @keyframes 規則
在css中，@keyframes規則可以使用來創建動畫，創建動畫是通過逐步改變從一個CSS樣式到另一個CSS樣式。創建動畫規則後，可以與其他元素進行捆綁。
@keyframes 規則三要素：
（1）動畫規則名稱： animation_name 通過該名稱進行元素與動畫的捆綁。
（2）變化過程與CSS樣式。
1）from 、to
from: 初始的CSS樣式
to：改變之後的CSS樣式
{
from {background: red;}
to {background: yellow;}
}
2）%
0%：初始狀態CSS樣式
100%：完成時CSS樣式
中間過渡階段可以有多個
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
完整動畫規則案例：
myanimation：動畫規則名
@keyframes myanimation
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
綁定動畫規則
div
{
animation:myanimation 5s;
}
2.8.2 animation
使用簡寫屬性把 animation 綁定到一個網頁元素
語法
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
name指定要綁定到選擇器的關鍵幀的名稱
duration動畫指定需要多少秒或毫秒完成
timing-function設置動畫將如何完成一個週期
delay設置動畫在啓動前的延遲間隔
iteration-count定義動畫的播放次數
direction指定是否應該輪流反向播放動畫
fill-mode規定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式
play-state指定動畫是否正在運行或已暫停
2.9 多列
CSS3 可以將文本內容設計成像報紙一樣的多列布局
column-count指定元素應該被分割的列數。
column-fill指定如何填充列
column-gap指定列與列之間的間隙
column-rule所有 column-rule-* 屬性的簡寫
column-rule-color指定兩列間邊框的顏色
column-rule-style指定兩列間邊框的樣式
column-rule-width指定兩列間邊框的厚度
column-span指定元素要跨越多少列
column-width指定列的寬度
columns設置 column-width 和 column-count 的簡寫
column-count:3;
column-gap:40px;
column-rule-style:dotted;
這兩天由於有事情忙，所以學習的內容有點少。