html+css旋转的方法

方法：transform:rotate(45deg)

transform是转换的意思，里面有矩阵属性，X，Y，Z轴的变换等。

rotate用的是他的旋转属性45deg，就是旋转45度

例子：

html：<div class="byl"></div>

css：.byl{width:100pxheight:100pxbackground:#ddd-webkit-transform:rotate(45deg)}

HTML5 rotate在安卓的微信上失效的原因是安卓内置的微信浏览器不支持rotate渲染导致。

一般html5的rotate需要测试浏览器的兼容性，没有经过测试的浏览器就不会被支持。

rotate的实现方法如下：

G = {}

// 获取canvas的上下文

G.ctx = document.getElementById('canvas').getContext('2d')

var x = 200

var y = 100

var w = 30

var h = 70

G.ctx.fillRect(x, y, w, h)

G.ctx.save()

G.ctx.translate(x, y)

G.ctx.rotate(30*(Math.PI/180))

G.ctx.fillRect(0, 0, w, h)

G.ctx.restore()

---