CSS3 2D 轉換

Internet Explorer 10, Firefox, 和 Opera支援transform 屬性.
Chrome 和 Safari 要求字首 -webkit- 版本.
注意： Internet Explorer 9 要求字首 -ms- 版本.
語法：

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

CSS3 3D 轉換

• 轉換屬性

• 3D 轉換方法

CSS3 過渡

CSS3 過渡是元素從一種樣式逐漸改變為另一種的效果。要實現這一點，必須規定兩項內容：

• 指定要新增效果的CSS屬性
• 指定效果的持續時間。
  注意： 如果未指定的期限，transition將沒有任何效果，因為預設值是0。
  例：

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

過渡屬性

CSS3 動畫

當在 @keyframes 建立動畫，把它繫結到一個選擇器，否則動畫不會有任何效果。
指定至少這兩個CSS3的動畫屬性綁定向一個選擇器：

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

@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}
 
@-webkit-keyframes myfirst /* Safari 與 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}

div
{
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari 與 Chrome */
}

可以使用百分比來規定變化發生的時間

@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
 
@-webkit-keyframes myfirst /* Safari 與 Chrome */
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

CSS3 動畫屬性