Html語言編寫，div或者table布局，CSS設置樣式，Javascript設置響應，交互，這就是我最初印象中網頁最基礎最原始的存在，於是在這裡就給CSS定了性，設置樣式：樣式嘛，就好像是裝修的效果，只有最初的原始狀態和裝修後的狀態，都是靜態的，哪怕存在一個hover，也不過是對比之前之後的狀態而已，卻不曾想，今天碰到的這個解決辦法讓我又深深的震撼了一把。
問題：如何讓你的一個div模塊旋轉？
復制代碼代碼如下:
<span style="font-size:12px;"><div id="rotate" style="backgroun:red;width:300px;height:300px;"><div></span>
看到這個問題，你會怎麼解決呢，“旋轉”嘛，動態的，當然用Javascript來解決啦,誠然這樣可以解決問題：在div中填寫onmouSEOver=“round()”，然後編寫script語句，實現操作-webkit-transform:rotate(值 deg)中的值嘛，setinterval重復調用改變值，然後讓它不斷轉圈嘛。
但是還有更簡單些的麼，你看這樣做的話，又要寫script，又要加入新的指令，著實有些啰嗦，那還有什麼更簡單的辦法呢？
其實，的確還有一種更簡單的辦法：CSS3，我們只需在設置樣式的時候，這樣做就可以了哦。
復制代碼代碼如下:
<span style="font-size:12px;">.rotate{width: 300px;height: 300px;background-color: red;-webkit-transition:-webkit-transform 1s;}
.rotate:hover{-webkit-transform:rotate(360deg);}</span>
這裡我們來看一下這段編碼的關鍵點在哪，transition，就是它，w3c中對它的說明是“圓滑的用動畫效果來改變CSS的屬性值”，看吧，還是來對比裝修前後的狀態，不過裝修前到裝修後每段時間的變化都展現了，仿佛一幀加一幀就湊成了影片一樣，這樣的對比更像是一個變化的演繹，也就成了動態效果了，看吧，CSS未必然只能靜態展示，同樣可以動起來的哦。