你的js代码开始的那句oGCtranslate100，100改变了绘图的原点，虽然你清除的图形宽高设置够所以你clearRect清楚画布的时候只清除了一点点正确写法oGCclearRect0，0，oCwidth，oCheight你可以吧其余代码注释掉看；你现在可以旋转一圈吗，如果可以就用一个setInterval方法来调用函数，它会不停的调用函数，如果你现在只是写了这个静态的样式，有2中方法，1种是把html5和css3中类似于时钟的做法，网上又很多，自己查一下，第2中方法。

2然后在上方的head标签中的style标签设置样式，这里设置图片的宽度和高度并设置相对定位，然后设置图片的鼠标悬浮样式，其中设置动画的形式为3d以及设置图片3d旋转偏移的角度，添加一个动画，设置好延时即可3最后打开浏览器；1首先新建一个html空白文档，取名字叫做css3动画，保存一下2然后写html结构，只需要一个div元素即可，class名字叫做img 3设置其边框为不同的颜色，边框宽度设置成100px4因为是圆环，所以我们用到了css3的圆角。

1px solid #4EC83Bwidth 30pxheight 100pxquotHello World！ltdivltbodylthtml效果如下对于英文，IE还有一种方式，使用mswritingmode，中文只能竖排，不能旋转，英文可以 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，四个参数就是输入的四个坐标，当然也可以用画线段的方式画出来旋转的话canvas也支持rotate方法，参数是45deg就可以了，跟CSS3差不多的使用方法。

css3实现div旋转

我的思路是这样的用圆角属性做出扇形，再用一个矩形去遮挡 宽高相等画出正方形 加borderradius属性做出14圆或者12圆 矩形旋转 例如transform rotate45deg 顺时针旋转45度 以上都在一个positionrelative的父元素。

lt！doctype html lthtml lthead ltmeta charset=quotutf8quot lttitle旋转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文件，请联系我给我留言。

代码如下lt！DOCTYPE html lthtml lthead lttitleCSS3旋转图片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怎么旋转div

1、有，不过这个quot时代quot还需要等待，因为所有浏览器还没有真正的支持，可以用的有ie9以上Chrome以及Safari火狐等支持html5的浏览器，一下是针对body对应的代码bodywebkittransform scaleX1 *webkit内核的，比如。

2、html5中引入3d模型的方法是借助第三方PlayCanvas插件来完成的比如可以用以下方法实现图片的360度旋转代码示例var render， loop， t， dt， 定义变量 DEG2RAD = MathPI 180， 角度转弧度 cvs =。

3、具体操作是首先新建一个html文件，写入两个div，分别用来演示两种方法插入标签2首先是用html标签插入图片，这里直接在img标签中使用src属性就可以插入图片路径就成功了3接着是用css插入，在div中设置class属性为img2。

4、lt！DOCTYPE html lthtml lthead ltstyle bodymargin0pxpadding0px *transform就是专门为img图片设置的旋转* img1transformrotate90deg border1px solid red ltstyle lthead ltbody ltimg。

5、CSS20实现不了，CSS30有个rotate属性，写法xxxhoverwebkittransformrotate360deg，但是不兼容IE10以下的浏览器 还有一种办法，再做一张旋转的图片，鼠标hover的时候变成那张旋转的图片就好了JS可能也可以。