css實現圓環(huán)旋轉加載 lt！DOCTYPE html css實現圓環(huán)旋轉加載 margin0padding0 outbox positionrelative*相對定位* width100px*寬度100px* height100px*高度100px* backgroundorange*背景色橙色* borderradius50%*圓角50%* margin100px*外側邊距100px；webkit核心瀏覽器使用和火狐瀏覽器使用transform可以做到旋轉，IE要使用DXImage濾鏡，代碼如下transformrotate90degmstransformrotate90deg * Internet Explorer 9*moztransformrotate90deg * Firefox *webkittransformrotate90deg * Safari 和 Chrome *otransform。

使用transformorigin設置css3旋轉中心，分別有兩個參數，代表x和y軸的位置旋轉參考的零點元素左上角的位置或者說盒子模型的左上角參考點的坐標線向右的x軸和幾何x軸一樣取正值，向下的y軸和幾何y軸相反取正值，圖解如下CSS transform中的rotate的旋轉中心設置有兩種1使用關鍵字設置位置；1我們用兩個相同的div編輯它，這是基本的div代碼2這是一個沒有旋轉的div然后我們只設置灰藍色div的旋轉，以便我們確切地知道旋轉中心點是什么3設置灰藍色div是使用t類名，然后使用變換，然后旋轉注意角度是deg，這里我們設置旋轉45度4然后查看對比度，灰色藍色div已旋轉，旋轉的中心。

使用transformtranslate150px，200px rotate45deg scale15可以對一個元素實現多種變形通過transformorigin屬性改變變形基準點位置3D變形功能允許圍繞X軸Y軸Z軸旋轉，縮放以及傾斜效果，使用rotateXrotateYrotateZscaleXscaleYscaleZskeskewYtranslateXtranslat；1旋轉，利用rotate來實現，代碼如下webkittransformrotate10deg 指定瀏覽器內核為webkit的翻轉方式 moztransformrotate10deg指定firefox瀏覽器私有屬性 transformrotate10deg 一般瀏覽器翻轉的角度為10弧度 2 翻轉，利用scale來實現，代碼如下scale本來是放縮的意思，原來括弧里面。

css旋轉特效3d代碼

1按鈕問題例如小燈，你要準備兩套圖片，一套灰色的燈代表關閉，另一套黃色的燈代表打開當點擊小燈后，利用JS代碼把灰燈圖片替換成黃燈圖片OFF和ON按鈕處理方法相同當然，要先點擊ON后小燈才能被點亮，這與現實生活中的風扇一樣，OFF時小燈是不能被點亮的2風扇旋轉問題CSS3有新功能。

使用transformrotate180deg要將CSS中的背景圖片旋轉180度，可以使用transformrotate180deg屬性，這會將背景圖片旋轉半圈，使其顛倒。

具體步驟如下一立方體結構中，使用一個wrapper div來包裹立方體在里面使用6個div來制作立方體的6個面二立方體的每一個面都有它自己的元素我們稍后會使用CSS來將立方體的6個面放置到正確的位置上三在立方體的CSS樣式中，首先要關注的是立方體的wrapper div為了制作3D效果，我們需要為它。

給元素設置transformorigin，右下角就是transformorigin right bottom。

代碼如下lt！DOCTYPE html CSS3旋轉圖片 demo width 100pxheight 75pxbackgroundcolor yellowborder 1px solid blackmargin20px div2 transform rotate30degmstransform rotate30deg * IE 9 * moztransform rotate30deg * Firefox * webkit。

* css3 讓一個圖片不斷翻轉示例代碼 *#gavinPlay* backgroundcolor url x y repeat 圖片來自百度圖片，按需要更換 *backgroundred urlquot。

使用css Sprites backgroundposition2px 2px進行定位圖片里德位置 圖片精靈部分代碼如下 你試試 S_login_top，S_login_bottom margin0px 0px 0px 0pxpadding0px 0px 0px 0pxbackgroundimageurlSpritesSpritespng S_login_topwidth420pxheight23pxback。

cssdiv旋轉

這個只用css不能完全實現，的配合js的定時器來完成，下面是代碼lt！DOCTYPE html HTML5 imgwidth 200px div1width 200pxheight 200pxborder1px solid #000margin 150px auto animate1 webkitanimation move1 2s infinite。

如下圖所示4然后給圖片設置過渡效果，過渡使用transition屬性，如下圖所示5當鼠標懸停在圖片上時，通過rotate給其設置變形，如下圖所示，正數代表的是順時針，負數代表的是逆時針6最后運行程序，會看到如下圖所示的效果，鼠標放在圖片上會順時針或者逆時針旋轉。