Single.9

程式設計條件判斷之章。

條件判斷，乍看之下似乎是個很深奧的名詞，其實不然，這詞比起迴圈來得易懂，因為你生活中就經常用到啊！雖然在許多程式語言的書籍裡會把這個稱做條件分支，但我認為條件判斷比較符合這邊的內容。…還是太難? 沒關係，我把這詞分開來講。

條件判斷，乍看之下似乎是個很深奧的名詞，其實不然，這詞比起迴圈來得易懂，因為你生活中就經常用到啊！雖然在許多程式語言的書籍裡會把這個稱做條件分支，但我認為條件判斷比較符合這邊的內容。

…還是太難? 沒關係，我把這詞分開來講。

條件，就條件啊…就像你心中的理想情人一樣，一定有些條件或者是標準之類的，然後到達了標準之後，再判斷是不是要跟他交往。如何? 這樣清楚條件判斷這四個字的意思了嗎? 蛤? 不夠清楚? 好吧好吧…

假設你在小7買東西，你看著架子上的御飯糰跟國民便當，眼神在兩者之間飄移，然後下定決心拿了國民便當去結帳。

就在你掏出口袋裡的零錢時，你發現你口袋裡其實只剩下51元，這時你當然只能把便當放回去，然後選壽司回家啦~((咦?

這，就是最簡單的條件判斷之一。

「那麼，在程式語言中，要怎麼表達呢? 」

我繼續沿用上面去小7買東西的例子來說明。

if(零錢 &gt; 55元){
  國民便當帶回家
}esle{
  壽司帶回家
}

if(零錢 > 55元){

國民便當帶回家

}esle{

壽司帶回家

}

從上面這程式來看，原則上是不可能被編譯器所接受，因為沒有定義，文法也不對啊!

但，我在這裡只是方便解釋，千萬不要傻傻的Ctrl+C、Ctrl+V喔！

所以，聰明的你看出來了嗎? 對！你看見關鍵字 if 了，真是太棒了！延續之前文章的觀念，if 在英文中有「如果」、「是否」的意思，所以你知道該怎麼做了，沒錯！就是代入！

就提示到這裡了，我猜你應該懂了，所以以下依照慣例，來個簡單測試，當然，這次的解答絕不會像上次那樣時隔數月啦！ XD

int i,j,money = 0;
for(i=0;i&lt;20;i++){
  if(money==10){
    System.out.println("存到"+ money + "元了！");
  }else{
    System.out.println("現在存了"+ money + "元。");
  }
  money++;
  for(j=0;j&lt;10000;j++);//延遲一段時間，純粹是想讓數值跑慢點...
}

int i,j,money = 0;

for(i=0;i<20;i++){

if(money==10){

System.out.println("存到"+ money + "元了！");

}else{

System.out.println("現在存了"+ money + "元。");

}

money++;

for(j=0;j<10000;j++);//延遲一段時間，純粹是想讓數值跑慢點...

}

如何於 Ubuntu 安裝Oracle Java JDK？

最近發現Ubuntu比以前的版本來得穩定許多，也因為遊戲已經不怎麼在玩了，所以就乾脆將主系統改成Ubuntu然後原來的Windows則變成副系統。裝好後的感想，順暢無比，用起來愉快非凡！不過安裝好後發生了一個問題，就是我沒辦法使用 Oracle 提供的JDK開發套件去寫JAVA程式，再加上內建的套件庫中找不到新版本然後我又不太想要用Open JDK所以就開始展開網路大搜索啦~

最近發現Ubuntu比以前的版本來得穩定許多，也因為遊戲已經不怎麼在玩了，所以就乾脆將主系統改成Ubuntu然後原來的Windows則變成副系統。裝好後的感想，順暢無比，用起來愉快非凡！

不過安裝好後發生了一個問題，就是我沒辦法使用 Oracle 提供的JDK開發套件去寫JAVA程式，再加上內建的套件庫中找不到新版本，然後，我又很奇怪的不太想要用Open JDK所以就開始展開網路大搜索啦～

後來我在這裡查到了相關的訊息，先感謝他的分享。(Java 7 安裝方法請點此) 不過他的步驟有些部份似乎有些問題，所以我在這裡說明一下我的方法。

首先，你得要先到 Oracle 的官方網站下載 JDK 回來。有分兩種版本，一種是 bin 另一種則是 rpm 。以下將以 bin 講解。再來，請打開 Ubuntu 的終端機，輸入下面這個指令設定檔案的權限。

sudo chmod -x /檔案位置/jdk-6u25-linux-i586.bin

1 2	sudo chmod -x /檔案位置/jdk-6u25-linux-i586.bin

接下來輸入這個指令執行這個安裝程式。

sudo ./檔案位置/jdk-6u25-linux-i586.bin

1 2	sudo ./檔案位置/jdk-6u25-linux-i586.bin

然後他會在你所在的資料夾將檔案解壓縮出來並且編譯。

在這裡你可能會遇到一個很怪得問題，那就是當程式執行到最後時會有一個要求你按下 Enter 以繼續執行的訊息，而當你一按下 Enter 會有點像當機一樣卡住。這時你不用驚慌也不要按下 Ctrl+C 取消，請稍候片刻即可。

解壓縮完畢後，你可以把檔案複製到任何你想複製的地方，因為我們接下來要設定環境變數。

接著，請輸入以下指令打開設定環境變數的檔案

sudo  gedit  /etc/profile

1 2	sudo gedit /etc/profile

在開啟的檔案的最底下加入

export JAVA_HOME=/資料夾路徑/jdk1.6.0_25
export CLASSPATH=.:$JAVA_HOME/lib
PATH=$JAVA_HOME/bin:$PATH

export JAVA_HOME=/資料夾路徑/jdk1.6.0_25

export CLASSPATH=.:$JAVA_HOME/lib

PATH=$JAVA_HOME/bin:$PATH

請記得修改資料夾路徑部份，例如你放在/home/底下，則改成：

export JAVA_HOME=/home/jdk1.6.0_25

1 2	export JAVA_HOME=/home/jdk1.6.0_25

即可。

然後存檔，重新開啟終端機，再輸入

java -version

1 2	java -version

看 java 虛擬機器的版本對不對。一定要重新開啟終端機，否則會顯示之前版本的JVM訊息喔！登出再登入，之後打開終端機輸入

javac -version

1 2	javac -version

看看編譯器是否可以運行，若都正常應該會出現類似以下這樣的訊息。(1.6.0_25)

這樣就大功告成啦！這樣之後你就可以天天品嚐這美味的(?)爪哇咖啡吧 XD

小技巧，終端機可以複製跟貼上喔！

程式設計迴圈之章，while。

While是另一個常見的迴圈控制語法，在英文裡 while 有當的意思，請注意是”ㄉㄤ”不是”ㄉㄤˋ”。 while 與 for 有何不同呢? 除了語法上的表達不同之外，其應用的地方也不太相同。以for來講，他最常被應用於準確的次數控制，而while則較常被使用在不明確的次數控制上，當然，在你熟悉了while之後，也是可以讓他具有與for類似的性質。

While是另一個常見的迴圈控制語法，在英文裡 while 有當的意思，請注意是”ㄉㄤ”不是”ㄉㄤˋ”。

「那麼 while 與 for 有何不同呢?」

除了語法上的表達不同之外，其應用的地方也不太相同。

以for來講，他最常被應用於準確的次數控制，而while則較常被使用在不明確的次數控制上，當然，在你熟悉了while之後，也是可以讓他具有與for類似的性質。

或許你會對於上述的次數控制有所疑惑，不過你不用太擔心這問題，因為顧名可思其義啊！

次數控制指的是我要指定某一特定區塊的程式執行多少次，次數到了之後便執行區塊外面的程式。有點複雜，這時你可以回到上一篇觀看 i 先生與 j 先生的例子應可略知一二。

回到正題。 while 一般的 C like 語言寫法會像這樣：

while(判斷式){
  .
  .
  ...程式碼敘述區。...
  .
  .
}

while(判斷式){

...程式碼敘述區。...

}

跟 for 比起來，while 精簡許多，只需要給他下一個判斷式就可以跑了。而他的動作方式是這樣的：「當判斷式的條件成立的時候，就執行區塊裡面的程式碼，直到條件不成立時才結束執行。」

根據這個邏輯，如果寫成這樣的程式碼：

int i;
while(true){
  i++;
}

int i;

while(true){

i++;

}

那這程式就會進入無限迴圈，直到 i 破表導致程式出現錯誤為止，不過通常這程式早已進入死當狀態…

所以， while 可以怎麼用呢? 我想可以先把 while 當作 for 來說。

試想，for 的基本使用方式是什麼? 對，就是 for(變數指定數值;下判斷式;累加) 從這裡面你發現甚麼了嗎?

是的，就是兩者的共通點「判斷式」。差別只在於，for還有另外兩個設定，也就是給某一變數的初始值以及未達到條件的累加。

那麼如何在看似 for 迴圈殘缺版的 while 有同樣的功能呢? 很簡單，只要把缺少的兩個東西放進就好啦~

像這樣…

int i=0;
while(i&lt;10){
  printf("%d",i);
  i++;
}

int i=0;

while(i<10){

printf("%d",i);

i++;

}

這段程式碼的功能等同於

int i;
for(i=0;i&lt;10;i++){
  printf("%d",i);
}

int i;

for(i=0;i<10;i++){

printf("%d",i);

}

從以上這兩個程式就可以很明顯的看出，for 的專業在於明確的次數控制，而且閱讀起來也較容易理解。而同功能的 while 程式在閱讀上就沒有 for 這麼好理解，尤其是當 while 區塊裡要做的事情很多的時候。所以我說，while 的專業在於不明確的次數控制。

既然，while 的專業是不明確的次數控制，那該怎麼利用呢? 這就要問施主您啦～((被打

這樣好像太不負責任了，讓我想想…想想…想想…想想…想想…

問各位有沒有這樣的經驗? 你說我沒問? 等我一下咩…

就是在做一件事情，但是那件事情在還沒到達某個條件前你就必須一直給他做下去，直到滿足那個條件為止。

我拿寫報告來說好了，如果有一門課你必須繳出一篇報告才能過，而因為之前玩過頭，忘記做報告這件事，就當你想起來的時候，繳交的最終期限就在明天時你會怎樣?

「杯具。」

欸~ 是一場悲劇沒錯…但你還是要做啊！不然被當掉是一件很痛苦的事情…

所以你一定會熬夜將這報告完成，而你還沒完成就等於你不會過，所以，你就必須要一直做一直做，做到完成它為止。這就是一種不明確的次數控制了，難道你知道你報告何時寫出來?

好吧，我承認不明確的次數控制好像有點冗長難記，簡單講就是，當條件未到，你就必須一直做這樣的意思啦~

如何?希望這例子可以讓大家更了解 while 的用途與意義，甚麼? 你說沒有範例程式?

好吧好吧…

boolean paper = false;           //報告還沒做
int words = 0, min_words = 1000; //報告要至少1000字才算有做
while(!paper){                   //當報告真的沒做
  if(words &lt;= min_words){
    paper = true;                //報告做完了
    printf("報告做完了!");
  }
  words++;                       //字數增加中...
}

boolean paper = false; //報告還沒做

int words = 0, min_words = 1000; //報告要至少1000字才算有做

while(!paper){ //當報告真的沒做

if(words <= min_words){

paper = true; //報告做完了

printf("報告做完了!");

}

words++; //字數增加中...

}

玩耍小玩意，振動開關軸向型。

根據實際把玩的結果猜測，這玩意兒的構造應該是這樣的：中間部份是金屬傳導區，兩邊有一個塑膠物隔離兩邊那小小地金屬接點，而內部有一顆小珠子會隨著傾斜度或者搖晃度而滾來滾去。當珠子滾到某一邊的時候，就會形成一個通路，也就是開關打開的意思啦！相反地，圓珠離開那個接點時，就會斷開。

就在昨天，我到高雄著名的電子街「長明街」逛逛，然後就發現了這個有趣又沒用過的小小零件，是的就是振動開關。

啊…不是上面那花，對不起，我放錯圖了，不過讓大家眼睛放鬆一下好像也不錯，哈哈！

下面這張才是正身！

這小小的東西還不便宜呢！一個要25元，不過是個頗有趣的零件就是。

2011/06/13 拆解，證實以上的猜測~

接下來送上一個實際測試的結果，用一個簡單的電路呈現，拍得不好還請各位見諒囉～

程式設計迴圈之章，for。

經過上一篇沒有任何語法解說的文章後，相信各位對於迴圈這東西仍然是一頭霧水，這，不意外。
今天，這篇文章將以實際的例子帶領各位進入迴圈的領域，以下文章將會有3種語言版本的迴圈，分別是C、Java、Visual Basic這三種學校教學常見的語言。另外，獨夜也希望大家在閱讀的同時能練習一遍，自己實際跑一次的感覺絕對比光看不練的感覺還要棒啊!

經過上一篇沒有任何語法解說的文章後，相信各位對於迴圈這東西仍然是一頭霧水，這，不意外。

今天，這篇文章將以實際的例子帶領各位進入迴圈的領域，以下文章將會有3種語言版本的迴圈，分別是C、Java、Visual Basic這三種學校教學常見的語言。另外，獨夜也希望大家在閱讀的同時能練習一遍，自己實際跑一次的感覺絕對比光看不練的感覺還要棒啊!

一樣，先以for來做開頭。

int i,j;
for(i=0;i&lt;10;i++){
  for(j=0;j&lt;5;j++){
    System.out.println("j="+j);
  }
  System.out.println("i="+i);
}

int i,j;

for(i=0;i<10;i++){

for(j=0;j<5;j++){

System.out.println("j="+j);

}

System.out.println("i="+i);

}

以上語法於Java中適用，以下則是VB的版本。

int i,j
for i = 1 to 10
    for j = 1 to 5
      print j
    next j
  print i
next i

int i,j

for i = 1 to 10

for j = 1 to 5

print j

next j

print i

next i

對了，還有 C/C++ 的版本

int i,j;
for(i=0;i&lt;10;i++){
  for(j=0;j&lt;5;j++){
    printf("j= %d",j);
  }
  printf("i= %d",i);
}

int i,j;

for(i=0;i<10;i++){

for(j=0;j<5;j++){

printf("j= %d",j);

}

printf("i= %d",i);

}

知道的讀者或許會很熟悉，沒錯，這就是上次那篇文章的題目，今天這篇文章我先解釋我怎麼解讀這些程式碼的。

我說過，以閱讀文章的方式去解讀程式碼絕對比你把程式碼當作程式碼來看來得輕鬆許多，這邊我先忽略輸出的程式碼。

首先，我定義了 i 跟 j 為整數(integer)。

然後我給 i 一個數字 0 ，若 i 小於 10 的時候，i 就會加 1。

再來我同樣地也給 j 一個數字 0 ，若 j 小於 5 時，j 就會加 1 。

好了，以上就是我對這程式碼的解讀。再來，我們需要一點區域的概念，或者稱區塊的概念。

在 C like 的程式語言中，經常使用大括號來當作區塊的分界線，”{“這個符號到表區塊的起始點，”}”這個符號則代表結束，太抽象嗎? 沒關係，看了下面這張圖後你就會了解區塊到底是什麼了。直接以範例程式來做說明。

通常最外層會用main包起來，以Java為例就像這樣：

public class test_for {
    public static void main(String[] args) {
       int i,j;
       for(i=0;i&lt;10;i++){
         for(j=0;j&lt;5;j++){
           System.out.println("j="+j);
         }
         System.out.println("i="+i);
       }
    }
}

public class test_for {

public static void main(String[] args) {

int i,j;

for(i=0;i<10;i++){

for(j=0;j<5;j++){

System.out.println("j="+j);

}

System.out.println("i="+i);

}

OK，現在我們了解到，程式碼也是有地域性的，在他的領地中，裡面的東西就是屬於他執行的範圍，其他的他一概不會去理會，因為那不甘他的事。換句話說，他只會做主人交給他的事情，並不會也不可能主動去干涉其他人在做的事情。

回頭來看這些程式碼。

int i,j;
for(i=0;i&lt;10;i++){
  for(j=0;j&lt;5;j++){
    System.out.println("j="+j);
  }
  System.out.println("i="+i);
}

int i,j;

for(i=0;i<10;i++){

for(j=0;j<5;j++){

System.out.println("j="+j);

}

System.out.println("i="+i);

}

因為我們知道了他的領域性，所以在這個程式碼裡，我們可以分成兩個區塊，一個是屬於 i 的，另一個則是 j 的，這在剛剛的說明文字裡就已經分好了。

區塊分好了後，我們來了解一下 for 的真正意義，也就是說在我給他了那些數值與判斷式之後他所做的動作。從前面的描述中，我們可以知道，他是依著條件在走的，依什麼條件?

依你給的第2個數值，也就是判斷式，當到達判斷式的條件後他就不會繼續執行區塊裡的東西了，直接拿實際例子來說，i 會在執行完裡面的程式後自動加 1 ，直到加到10的時候跳出，因為他明顯的大於10了。

簡單說就是 i 先生一開始手上沒有半顆蘋果(i = 0)，然後他做了點工作後，得到一顆蘋果(i++)。最後手上累積了 9 顆蘋果(i<10)終於拿不下了，所以他就辭職不幹了…((咦?

同樣的道理，j 先生跟i 先生一樣，不過在這程式裡面的 j 先生是 i 先生的助手，i 先生每次都會叫 j 先生幫忙做 5 個工作，做完那 5 個工作後，j 先生會跟 i 先生說：「我做好了！」…如此循環的結果，就是 j 先生的工作量遠多於 i 先生，所以結論是 i 先生是個壞上司…XD

正經點，在這程式裡面，j 先生做 5 次工作等於 i 先生的一次，也就是說，當你執行程式時你會發現 i 出現一次，j 會出現 5 次，若在 j 先生的工作範圍裡面放上一段程式碼讓他累加，你會發現最後出來的數值是 i 與 j 所做次數的相乘結果，也就是 50！

你問我怎麼加入? 像這樣就好囉~ (Java)

int i,j,k=0;
for(i=0;i&lt;10;i++){
  for(j=0;j&lt;5;j++){
    k++;
  }
}
System.out.println(k);

int i,j,k=0;

for(i=0;i<10;i++){

for(j=0;j<5;j++){

k++;

}

System.out.println(k);

不知道以上解說有沒有讓你更了解了for了呢? 希望能幫上你的忙，預祝閱讀本篇文章的您有所收穫！

Khan Academy 超過2100部精彩教學的線上學院！

在我開始介紹之前，先讓大家看看 Khan Academy 創辦人 Salman Khan 在 Ted 的演講吧！影片最後居然還出現了比爾蓋茲呢！記得，第一次跟 Khan Academy 接觸其實是一個巧合，當時的我因為數學而苦惱，老師說的我不懂、公式我也記不起，然後老爸就跟我說：「我記得那個一堆線上影片的網站裡有個很棒的教學，他是利用數位白板做教學，還不錯，只不過都是英文的。」

(本文原發表於免費資源網路社群)

在我開始介紹之前，先讓大家看看 Khan Academy 創辦人 Salman Khan 在 Ted 的演講吧！影片最後居然還出現了比爾蓋茲呢！

記得，第一次跟 Khan Academy 接觸其實是一個巧合，當時的我因為數學而苦惱，老師說的我不懂、公式我也記不起，然後老爸就跟我說：「我記得那個一堆線上影片的網站裡有個很棒的教學，他是利用數位白板做教學，還不錯，只不過都是英文的。」

老爸那天其實說的很模糊，他只記得甚麼學院這樣而已，因為他是在某個地方聽課時老師介紹的。結果這樣模糊的資訊卻被我翻出來了，只能說Google實在太神…

關於 Khan Academy 的開始在 Ted 的影片裡他本人都已經有解釋，不過我想我還是在這裡簡單的敘述一下。

Khan Academy 一開始還沒有這組織的創立，創辦人 Salman 原本也只是個用遠端教學教他姪女(Nadia)的家教，為了解決她對於七年級數學的一些困惑。經過他的教導，Nadia終於趕上班級的進度，甚至還超前呢！之後他開始用類似的方法教他的其他兄弟姊妹，但因為他本身還有工作要做，且美國各地都有時差，為了解決這個問題，他開始製作教學影片並且把教學的內容放到YouTube上，他當時只是單純的想解決這個問題而已。(詳細可參閱網站的FAQ)

沒多久，許多在 YouTube 上的學生以及大人看了他的影片之後，發現其內容之棒超乎想像，並且在底下的影片評論留下極佳的讚賞，短點的例如：「我怎麼沒有早點看到這些影片?」、「這真是太棒了！我受益良多！」當然也有很長的感想…「我從沒有聽過有人能說得這麼棒，你的影片著實的幫助了許多年親人以及成年人。我今年65歲，而我現在才能夠全然的了解代數是甚麼。學習一個新的概念就像一位衝浪者抓住一個波浪或一位登山者攻頂後一樣的興奮，這就是所謂的成就感，而這感覺真的讓人覺得很舒暢。非常感謝你的幫助使許多人感到滿足。」(譯自原文)

在影片中有提到一個學校的計畫，且居然在詢問後的幾天內學校就將一些年級教學課程給Khan Academy處理了！這真是太令人驚訝了。而且他們正在開發的阮堤其功能之強大…真是，太猛了。不過這裡不打算介紹軟體，因為筆者自己還沒使用過 XD

雖然，目前這些影片都是英文發音加英文字幕，但我想，若有人能夠幫忙翻譯的話，相信這些影片對於我們也是非常有幫助的。因為在我觀賞過微積分的部分後，我對微積分的概念更加的清晰，並且真的讓我受益良多！

而這全新的教育方式已經影響了許多人，依個人感覺它比目前台灣提倡的許多遠距教學來得有效果，並且其內容之豐富、之精華絕對超乎你的想像，且內容淺顯易懂，該有的一個都沒少，而且你還可以讓講者暫停、倒轉、重播…想聽幾次都沒問題，你是甚至還能在半夜叫他為你講課！(笑)

準備好接受這劃世紀的教學網站了嗎? 超過2100部的影片、100個自我練習的測驗程式，且範圍橫跨數學、物理、化學、金融以及歷史！這麼多樣的資源，不看，對得起自己嗎? 洗好耳朵，開啟音響，準備好你的紙筆以及滑鼠，點下這連結，找到你感興趣的、想加強的課程，毫不猶豫地點下去吧！

Khan Academy 連結: http://www.khanacademy.org
延伸閱讀：Khan Academy已成線上教育一方之霸：無法歸類，才是「原味」 – Mr.6

繼Google網頁傾斜後，我的網站也斜了!?

最近Google行動版的傾斜網頁在台灣媒體界爭相報導之時，我的網站也不明原因的傾斜了。在火狐中網頁已經呈現傾斜狀態，想說可能是網頁瀏覽器問題，於是打開了Chrome看看…不料，Google大神的瀏覽器居然也是這副德行！還少了字！那麼Opera呢？天啊啊啊啊啊啊！我明明就沒在搜尋欄上打傾斜，我也不是手機板啊，怎麼會這樣呢???? 難道是被駭客入侵?

IE瀏覽器無法呈現此效果。Firefox為最佳效果。

最近Google行動版的傾斜網頁在台灣媒體界爭相報導之時，我的網站也不明原因的傾斜了。

在火狐中網頁已經呈現傾斜狀態，想說可能是網頁瀏覽器問題，於是打開了Chrome看看…

不料，Google大神的瀏覽器居然也是這副德行！還少了字！那麼Opera呢？

天啊啊啊啊啊啊！我明明就沒在搜尋欄上打傾斜，我也不是手機板啊，怎麼會這樣呢???? 難道是被駭客入侵?

其實，不是駭客入侵，也跟瀏覽器沒關係~~(IE? 忽略XD)~~，這是CSS3的特效語法 transform 的其中一個應用「旋轉(rotate)」。基本語法參照以下：

/*webkit適用於Chrome moz則是Firefox o則是Opera*/
-webkit-transform: rotate(0.5deg);
-moz-transform: rotate(0.5deg);
-o-transform: rotate(0.5deg);

/*webkit適用於Chrome moz則是Firefox o則是Opera*/

-webkit-transform: rotate(0.5deg);

-moz-transform: rotate(0.5deg);

-o-transform: rotate(0.5deg);

只要把以上這三行程式碼插入CSS語法的body標籤中，你的網頁就會整個傾斜囉！

body{
-webkit-transform: rotate(0.5deg);
-moz-transform: rotate(0.5deg);
-o-transform: rotate(0.5deg);
}

body{

-webkit-transform: rotate(0.5deg);

-moz-transform: rotate(0.5deg);

-o-transform: rotate(0.5deg);

}

如何? 是不是很有趣呢? 你可以嘗試著把 rotate(0.5deg) 的數字部分改成任一你想要的數值去嘗試看看，當然他也能套用在其他的語法裡面，例如滑鼠移到連結上時會翻轉、移到圖片上時圖片轉動..等等，詳細動畫使用可以參考CSS: Animation Using CSS Transforms這篇文章的內容，他底下有個火箭的小小範例可以玩玩看，當然，他還有提供這範例的CSS程式碼，有興趣可以弄下來嘗試看看。

喔，對了，他文章一開始的右邊那個小方塊當你滑鼠移過去時會旋轉並放大，這也是利用CSS3達成的，這在那篇文章裡也有相關的解釋，這邊我就不多做說明了，留給客倌們嘗試看看囉~ (基本上是把程式碼複製起來然後直接實測最快 XD(被打))