css2d

CSS3 轉換可以對元素進行移動、縮放、轉動、拉長或拉伸。
2D變換方法：
translate()方法，根據左(X軸)和頂部(Y軸)位置給定的引數，從當前元素位置移動
transform: translate(50px,100px);
rotate()方法，在一個給定度數順時針旋轉的元素。負值是允許的，這樣是元素逆時針旋轉
transform: rotate(30deg);
scale()方法，該元素增加或減少的大小，取決於寬度（X軸）和高度（Y軸）的引數
transform: scale(2,3); /* 標準語法 */

2D 轉換方法

函式 描述
matrix(n,n,n,n,n,n) 定義 2D 轉換，使用六個值的矩陣。
translate(x,y) 定義 2D 轉換，沿著 X 和 Y 軸移動元素。
translateX(n) 定義 2D 轉換，沿著 X 軸移動元素。
translateY(n) 定義 2D 轉換，沿著 Y 軸移動元素。
scale(x,y) 定義 2D 縮放轉換，改變元素的寬度和高度。
scaleX(n) 定義 2D 縮放轉換，改變元素的寬度。
scaleY(n) 定義 2D 縮放轉換，改變元素的高度。
rotate(angle) 定義 2D 旋轉，在引數中規定角度。
skew(x-angle,y-angle) 定義 2D 傾斜轉換，沿著 X 和 Y 軸。
skewX(angle) 定義 2D 傾斜轉換，沿著 X 軸。
skewY(angle) 定義 2D 傾斜轉換，沿著 Y 軸。

3D 轉換方法

函式 描述
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n) 定義 3D 轉換，使用 16 個值的 4x4 矩陣。
translate3d(x,y,z) 定義 3D 轉化。
translateX(x) 定義 3D 轉化，僅使用用於 X 軸的值。
translateY(y) 定義 3D 轉化，僅使用用於 Y 軸的值。
translateZ(z) 定義 3D 轉化，僅使用用於 Z 軸的值。
scale3d(x,y,z) 定義 3D 縮放轉換。
scaleX(x) 定義 3D 縮放轉換，通過給定一個 X 軸的值。
scaleY(y) 定義 3D 縮放轉換，通過給定一個 Y 軸的值。
scaleZ(z) 定義 3D 縮放轉換，通過給定一個 Z 軸的值。
rotate3d(x,y,z,angle) 定義 3D 旋轉。
rotateX(angle) 定義沿 X 軸的 3D 旋轉。
rotateY(angle) 定義沿 Y 軸的 3D 旋轉。
rotateZ(angle) 定義沿 Z 軸的 3D 旋轉。
perspective(n) 定義 3D 轉換元素的透視檢視。

CSS3 過渡

CSS3中，我們為了新增某種效果可以從一種樣式轉變到另一個的時候，無需使用Flash動畫或JavaScript。用滑鼠移過下面的元素：
transition屬性
指定要新增效果的CSS屬性
指定效果的持續時間。
如果未指定的期限，transition將沒有任何效果，因為預設值是0。
這個屬性加在改變前的樣式中

{
    transition: width 2s;
    -webkit-transition: width 2s; /* Safari */
}
div:hover
{
    width:300px;
}

簡寫的 transition 屬性：
div
{
    transition: width 1s linear 2s;
    /* Safari */
    -webkit-transition:width 1s linear 2s;
}
##CSS3 動畫
CSS3 可以建立動畫，它可以取代許多網頁動畫影象、Flash 動畫和 JavaScript 實現的效果。
動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。
您可以改變任意多的樣式任意多的次數。
請用百分比來規定變化發生的時間，或用關鍵詞 "from" 和 "to"，等同於 0% 和 100%。
0% 是動畫的開始，100% 是動畫的完成。
為了得到最佳的瀏覽器支援，您應該始終定義 0% 和 100% 選擇器。
###@keyframes 規則是建立動畫。
當在 @keyframes 建立動畫，把它繫結到一個選擇器，否則動畫不會有任何效果。

指定至少這兩個CSS3的動畫屬性綁定向一個選擇器：

規定動畫的名稱
規定動畫的時長
@keyframes myfirst
{
    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-name: myfirst;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
    /* Safari 與 Chrome: */
    -webkit-animation-name: myfirst;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
}
div
{
    animation: myfirst 5s linear 2s infinite alternate;
    /* Safari 與 Chrome: */
    -webkit-animation: myfirst 5s linear 2s infinite alternate;
}