中心旋轉在css3中是很容易實現的，css3有提供乙個rotate方法，直接使用它即可。
>次碳酸鈷
>
這個rotate就乙個角度的引數，我就不多說什麼了，我們著重說關鍵的ie。ie中沒有提供rotate這個方法，必須用構造旋轉矩陣去變換，如果不知道那是個啥，最好去看看線性代數。不過看下面應就能明白它的基本原理。
假如紅色的矩形是我們需要旋轉的元素，藍色矩形是旋轉之後的位置，也就是說(0,1)和(1,0)這兩個座標旋轉a角之後變成了(x,y)和(m,-n)，我們只要知道他們的變換關係就好。那麼(x,y)和(m,-n)可以用簡單的三角函式算出得到(sin(a),cos(a))和(cos(a),-sin(a))。把這個結果代入單位矩陣中得到xy
也就是sin(a)
cos(a)
假如a是45°就可以得到如下值。
0.707
0.707
我們把這個值用在ie的matrix濾鏡上
>次碳酸鈷
>
看吧，旋轉已經生效了。濾鏡中的sizingmethod這個引數的值是'auto expand'是為了讓變換後的內容不侷限於原理的區域大小如果不設定這個屬性，超出原區域的東西會被剪掉，所以做旋轉效果這個是必要的。
雖然是已經可以旋轉了，但是還沒完。把這個效果和css3的效果對比下就知道，這個旋轉了以後中心點會根據實際大小到處跑，所以我們要新增個偏移量來固定這個中心點。我們先要計算出它旋轉後的大小，然後就能知道它旋轉後大小的增量，偏移量就是這個增量的一半。
w和h的值根據初等數學就能計算出來，w=|sin(a)*h|+|cos(a)*w|，h=|sin(a)*w|+|cos(a)*h|。我們的這個元素寬度高度是100，那麼旋轉後的寬度高度就是141.4，增量是41.4，偏移量就是20.7。我們可以用margin負值來讓元素移動到這個偏移量的位置。
>次碳酸鈷
>
這樣旋轉才算是真正完成。
CSS3 實現元素翻轉（不是旋轉）
有時候我們要實現元素的垂直或者水平翻轉，尤其是的翻轉，兩張對稱的，可以用兩張來解決這個問題，那麼其他的元素呢？而且存兩張並不是上上策，如何用 實現呢？css3提供了transform屬性，實現方法如下 水平翻 transform scale 1,1 垂直翻 transform scale 1,1 那...
CSS3旋轉和動畫例子
1.css3旋轉的例子 2.css3動畫 部分最關鍵的就是 webkit transition all 0.5s ease in 目前而言，transition僅webkit核心的瀏覽器支援，所以此效果僅在chrome或是safari下有。transiton屬性有這幾個值 transition pr...
利用css3使元素旋轉角度
firefox webkit moz transform rotate 90deg webkit transform rotate 90deg ie filter progid dximagetransform.microsoft.basicimage rotation 3 這裡的引數可以是0，1，...