css實(shí)現(xiàn)圓環(huán)旋轉(zhuǎn)加載 lt！DOCTYPE html css實(shí)現(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)中心，分別有兩個(gè)參數(shù)，代表x和y軸的位置旋轉(zhuǎn)參考的零點(diǎn)元素左上角的位置或者說盒子模型的左上角參考點(diǎn)的坐標(biāo)線向右的x軸和幾何x軸一樣取正值，向下的y軸和幾何y軸相反取正值，圖解如下CSS transform中的rotate的旋轉(zhuǎn)中心設(shè)置有兩種1使用關(guān)鍵字設(shè)置位置；1我們用兩個(gè)相同的div編輯它，這是基本的div代碼2這是一個(gè)沒有旋轉(zhuǎn)的div然后我們只設(shè)置灰藍(lán)色div的旋轉(zhuǎn)，以便我們確切地知道旋轉(zhuǎn)中心點(diǎ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可以對一個(gè)元素實(shí)現(xiàn)多種變形通過transformorigin屬性改變變形基準(zhǔn)點(diǎn)位置3D變形功能允許圍繞X軸Y軸Z軸旋轉(zhuǎn)，縮放以及傾斜效果，使用rotateXrotateYrotateZscaleXscaleYscaleZskeskewYtranslateXtranslat；1旋轉(zhuǎn)，利用rotate來實(shí)現(xiàn)，代碼如下webkittransformrotate10deg 指定瀏覽器內(nèi)核為webkit的翻轉(zhuǎn)方式 moztransformrotate10deg指定firefox瀏覽器私有屬性 transformrotate10deg 一般瀏覽器翻轉(zhuǎn)的角度為10弧度 2 翻轉(zhuǎn)，利用scale來實(shí)現(xiàn)，代碼如下scale本來是放縮的意思，原來括弧里面。

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

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

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

具體步驟如下一立方體結(jié)構(gòu)中，使用一個(gè)wrapper div來包裹立方體在里面使用6個(gè)div來制作立方體的6個(gè)面二立方體的每一個(gè)面都有它自己的元素我們稍后會(huì)使用CSS來將立方體的6個(gè)面放置到正確的位置上三在立方體的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 讓一個(gè)圖片不斷翻轉(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)

這個(gè)只用css不能完全實(shí)現(xiàn)，的配合js的定時(shí)器來完成，下面是代碼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)懸停在圖片上時(shí)，通過rotate給其設(shè)置變形，如下圖所示，正數(shù)代表的是順時(shí)針，負(fù)數(shù)代表的是逆時(shí)針6最后運(yùn)行程序，會(huì)看到如下圖所示的效果，鼠標(biāo)放在圖片上會(huì)順時(shí)針或者逆時(shí)針旋轉(zhuǎn)。