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

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

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

css旋轉(zhuǎn)特效3d代碼

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

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

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

給元素設(shè)置transformorigin，右下角就是transformorigin right bottom。

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

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

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

cssdiv旋轉(zhuǎn)

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

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