(1)、3D 轉換

CSS3 允許您使用 3D 轉換來對元素進行格式化。

在本節中，您將學到其中的一些 3D 轉換方法：

rotateX()

rotateY()

(2)、rotateX() 方法

rotateX()方法，圍繞其在一個給定度數X軸旋轉的元素

div { transform: rotateX(120deg); 
-webkit-transform: rotateX(120deg); /* Safari 與 Chrome */ 
}

(3)、rotateY() 方法

rotateY()方法，圍繞其在一個給定度數Y軸旋轉的元素。

div { transform: rotateY(130deg); 
 
-webkit-transform: rotateY(130deg); /* Safari 與 Chrome */ 

(4)、3D 轉換其他方法

首先宣告 transform-style:preserve-3d

CSS3動畫

CSS3中，我們為了新增某種效果可以從一種樣式轉變到另一個的時候，無需使用Flash動畫或JavaScript。

(1)、@keyframes 規則

要建立 CSS3 動畫，你需要了解 @keyframes 規則。

@keyframes 規則是建立動畫。

@keyframes 規則內指定一個 CSS 樣式和動畫將逐步從目前的樣式更改為新的樣式。

(2)、CSS3動畫是什麼？

動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。

您可以改變任意多的樣式任意多的次數。

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

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

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

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

為了得到最佳的瀏覽器支援，您應該始終定義 0% 和 100% 選擇器。

把 "myfirst" 動畫捆綁到 div 元素，時長：5 秒：

當動畫為 25% 及 50% 時改變背景色，然後當動畫 100% 完成時再次改變：

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;} 

}

(3)、居於與CSS3的動畫屬性

下面的表格列出了 @keyframes 規則和所有動畫屬性：

下面兩個例子設定所有動畫屬性：

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;

}

與上面的動畫相同，但是使用了簡寫的動畫 animation 屬性：

div { 

animation: myfirst 5s linear 2s infinite alternate; /* Safari 與 Chrome: */ 

-webkit-animation: myfirst 5s linear 2s infinite alternate;

}