<html>
<head>
<meta?charset=UTF-8>
<title>YuGiOh</title>
<style?type="text/css">
#div?{
position:?absolute;
top:?50px;
left:?300px;
width:?300px;
height:?300px;
line-height:?300px;
text-align:?center;
border:?1px?solid?black;
}
</style>
<script?type="text/javascript">
var?rotateHTML5?=?function?(limit)
{
var?reg?=?/(rotate\([\-\+]?((\d+)(deg))\))/i;
var?wt?=?div.style['-webkit-transform'],?wts?=?wt.match?(reg);
var?$2?=?RegExp.$2;
console.log?($2);
div.style['-webkit-transform']?=?wt.replace?($2,?parseFloat?(RegExp.$3)?+?limit?+?RegExp.$4);
}
var?rotateIE?=?function?(obj)
{
var?d?=?!!obj.dobj.d?:?1;
var?r?=?d?*?Math.PI?/?180;
costheta?=?Math.cos?(r);
sintheta?=?Math.sin?(r);
obj.style.filter?=?"progid:DXImageTransform.Microsoft.Matrix()";
var?item?=?obj.filters.item?(0);
var?width?=?obj.clientWidth;
var?height?=?obj.clientHeight;
item.DX?=?-width?/?2?*?costheta?+?height?/?2?*?sintheta?+?width?/?2;
item.DY?=?-width?/?2?*?sintheta?-?height?/?2?*?costheta?+?height?/?2;
item.M11?=?costheta;
item.M12?=?-sintheta;
item.M21?=?sintheta;
item.M22?=?costheta;
obj.timer?=?setTimeout?(function?()
{
var?dx?=?d?+?1;
dx?=?dx?>?3601?:?dx;
obj.d?=?dx;
rotate?(obj,?dx);
},?30);
};
var?start?=?function?()
{
if?(!!div.interval)
{
clearInterval?(div.interval);
delete?div.interval;
}
else
{
div.interval?=?setInterval?(function?()
{
/.*webkit.*/i.test?(navigator.userAgent)rotateHTML5?(1)?:?rotateIE?(div);
},?30);
}
}
</script>
</head>
<body>
<button?onclick="start();">rotate</button>
<div?id="div"?style="border-radius:?90px;?-webkit-transform:?rotate(10deg);">ROTATE</div>
</body>
</html>