1. transform 與 transform-origin 使用說明
目前這兩個屬性得到了主流瀏覽器IE，webkit，firefox，opera的支持，屬性名分別為-ms-transform -webkit-transform，-moz-transform，-o-transform。可能有人會疑問為什么要加各瀏覽器的前綴（-ms-）,本人認(rèn)為可能在瀏覽器新版本發(fā)布時，此CSS屬性還沒有正式被W3組織當(dāng)標(biāo)準(zhǔn)發(fā)布吧，所以加前綴加以區(qū)分，以后所有瀏覽器肯定會統(tǒng)一使用transform 和trandform-origin的。

最新CSS標(biāo)準(zhǔn)參考網(wǎng)站：http://www.w3.org/Style/CSS/current-work。
IE9開發(fā)人員指導(dǎo)網(wǎng)站：http://msdn.microsoft.com/en-us/ie/ff468705。
webkit開發(fā)資料：http://www.webkit.org/projects/documentation/index.html，http://developer.apple.com/devcenter/safari/index.action。
firefox開發(fā)資料：https://developer.mozilla.org/En/Developer_Guide。
opera開發(fā)資料：http://dev.opera.com/articles/view/wcl-developer-guide/。
transform-origin是變形原點，也就是該元素圍繞著那個點變形或旋轉(zhuǎn)，該屬性只有在設(shè)置了transform屬性的時候起作用，它接受兩個參數(shù)，它們可以是百分比，em，px等具體的值，也可以是left,center,right，或者 top,center,bottom等描述性參數(shù) ；它的默認(rèn)值是50% 50%。
top left | left top 等價于 0 0；
top | top center | center top 等價于 50% 0
right top | top right 等價于 100% 0
left | left center | center left 等價于 0 50%
center | center center 等價于 50% 50%（默認(rèn)值）
right | right center | center right 等價于 100% 50%
bottom left | left bottom 等價于 0 100%
bottom | bottom center | center bottom 等價于 50% 100%
bottom right | right bottom 等價于 100% 100%
transform屬性實現(xiàn)了一些可用SVG實現(xiàn)的同樣的功能。它可用于內(nèi)聯(lián)(inline)元素和塊級(block)元素。它允許我們旋轉(zhuǎn)、縮放和移動元素 ，他有幾個屬性值參數(shù)：
rotate(旋轉(zhuǎn))允許你通過傳遞一個度數(shù)值來轉(zhuǎn)動一個對象；
scale是一個縮放功能，可以讓任一元素變的更大。它使用一個或者兩個正數(shù)和負(fù)數(shù)以及小數(shù)作為參數(shù)；當(dāng)使用一個參數(shù)時表示X軸和Y軸的縮放相同；
translate就是基于X和Y 坐標(biāo)重新定位元素，當(dāng)使用一個參數(shù)時表示X軸和Y軸的參數(shù)相同；
skew傾斜（ps中的斜切），參數(shù)是度數(shù)，當(dāng)使用一個參數(shù)時表示X軸和Y軸的參數(shù)相同；
matrix矩陣變換，就是基于X和Y 坐標(biāo)重新定位元素，它使用6個參數(shù)；
2.動態(tài)時鐘頁面的HTML + CSS
HTML 代碼：

<div id=”clock”>
<div id=”dot”></div>
<div id=”second” class=”needle”>
<div id=”second_needle”>
</div>
</div>
<div id=”minute” class=”needle”>
<div id=”minute_needle”>
</div>