你的js代碼開始的那句oGCtranslate100，100改變了繪圖的原點，雖然你清除的圖形寬高設(shè)置夠所以你clearRect清楚畫布的時候只清除了一點點正確寫法oGCclearRect0，0，oCwidth，oCheight你可以吧其余代碼注釋掉看；你現(xiàn)在可以旋轉(zhuǎn)一圈嗎，如果可以就用一個setInterval方法來調(diào)用函數(shù)，它會不停的調(diào)用函數(shù)，如果你現(xiàn)在只是寫了這個靜態(tài)的樣式，有2中方法，1種是把html5和css3中類似于時鐘的做法，網(wǎng)上又很多，自己查一下，第2中方法。

2然后在上方的head標(biāo)簽中的style標(biāo)簽設(shè)置樣式，這里設(shè)置圖片的寬度和高度并設(shè)置相對定位，然后設(shè)置圖片的鼠標(biāo)懸浮樣式，其中設(shè)置動畫的形式為3d以及設(shè)置圖片3d旋轉(zhuǎn)偏移的角度，添加一個動畫，設(shè)置好延時即可3最后打開瀏覽器；1首先新建一個html空白文檔，取名字叫做css3動畫，保存一下2然后寫html結(jié)構(gòu)，只需要一個div元素即可，class名字叫做img 3設(shè)置其邊框為不同的顏色，邊框?qū)挾仍O(shè)置成100px4因為是圓環(huán)，所以我們用到了css3的圓角。

1px solid #4EC83Bwidth 30pxheight 100pxquotHello World！ltdivltbodylthtml效果如下對于英文，IE還有一種方式，使用mswritingmode，中文只能豎排，不能旋轉(zhuǎn)，英文可以 mswritingmodetbrl；var rotateHTML5 = functionlimit deg += limit deg = deg 360 ？ 1 deg divstyle#39transform#39 = divstyle#39webkittransform#39 = #39rotate#39 + deg + #39deg#39 var rot。

用canvas，畫矩形的方法是rect，四個參數(shù)就是輸入的四個坐標(biāo)，當(dāng)然也可以用畫線段的方式畫出來旋轉(zhuǎn)的話canvas也支持rotate方法，參數(shù)是45deg就可以了，跟CSS3差不多的使用方法。

css3實現(xiàn)div旋轉(zhuǎn)

我的思路是這樣的用圓角屬性做出扇形，再用一個矩形去遮擋 寬高相等畫出正方形 加borderradius屬性做出14圓或者12圓 矩形旋轉(zhuǎn) 例如transform rotate45deg 順時針旋轉(zhuǎn)45度 以上都在一個positionrelative的父元素。

lt！doctype html lthtml lthead ltmeta charset=quotutf8quot lttitle旋轉(zhuǎn)lttitle ltstyle margin0 padding0 border0 div width200px height200px marginleft100px margintop100px img。

demo_rquot lttd lttr lttr lttd ltinput type=quotbuttonquot value=quotdemoquot onclick=quotdemo_rotatequot lttd lttr lttable ltdiv ltbody lthtml 你要找不到兩個js文件，請聯(lián)系我給我留言。

代碼如下lt！DOCTYPE html lthtml lthead lttitleCSS3旋轉(zhuǎn)圖片lttitle ltstyle demo width 100pxheight 75pxbackgroundcolor yellowborder 1px solid blackmargin20px div2 transform rotate。

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

html怎么旋轉(zhuǎn)div

1、有，不過這個quot時代quot還需要等待，因為所有瀏覽器還沒有真正的支持，可以用的有ie9以上Chrome以及Safari火狐等支持html5的瀏覽器，一下是針對body對應(yīng)的代碼bodywebkittransform scaleX1 *webkit內(nèi)核的，比如。

2、html5中引入3d模型的方法是借助第三方PlayCanvas插件來完成的比如可以用以下方法實現(xiàn)圖片的360度旋轉(zhuǎn)代碼示例var render， loop， t， dt， 定義變量 DEG2RAD = MathPI 180， 角度轉(zhuǎn)弧度 cvs =。

3、具體操作是首先新建一個html文件，寫入兩個div，分別用來演示兩種方法插入標(biāo)簽2首先是用html標(biāo)簽插入圖片，這里直接在img標(biāo)簽中使用src屬性就可以插入圖片路徑就成功了3接著是用css插入，在div中設(shè)置class屬性為img2。

4、lt！DOCTYPE html lthtml lthead ltstyle bodymargin0pxpadding0px *transform就是專門為img圖片設(shè)置的旋轉(zhuǎn)* img1transformrotate90deg border1px solid red ltstyle lthead ltbody ltimg。

5、CSS20實現(xiàn)不了，CSS30有個rotate屬性，寫法xxxhoverwebkittransformrotate360deg，但是不兼容IE10以下的瀏覽器 還有一種辦法，再做一張旋轉(zhuǎn)的圖片，鼠標(biāo)hover的時候變成那張旋轉(zhuǎn)的圖片就好了JS可能也可以。