版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Cl_Daisy/article/details/78230029
ps：这个旋转不能再IE浏览器中正常打开，因为IE浏览器不兼容CSS3
这里使用的重点属性是transform和rotate方法
定义：
transform属性是向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
rotate() 方法旋转画布的坐标系统。
语法
rotate(angle)
注：angle 旋转的量，用弧度表示。正值表示顺时针方向旋转，负值表示逆时针方向旋转
文中用的deg和angle一样
-
关于rotate说明
rotate() 方法通过指定一个角度，改变了画布坐标和 Web 浏览器中的 元素的像素之间的映射，使得任意后续绘图在画布中都显示为旋转的。它并没有旋转 元素本身。注意，这个角度是用弧度指定的。
如果要把角度转换为弧度，请乘以 Math.PI 并除以 180。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#body{
position: absolute;
width: 300px;
height: 300px;
top: 200px;
left: 200px;
}
#a{
position: absolute;
border: 1px solid #goldenrod;
top: 140px;
width: 300px;
height: 20px;
background-color: goldenrod;
transform: rotate(0deg);
}
#b{
position: absolute;
border: 1px solid #goldenrod;
left: 140px;
width: 20px;
height: 300px;
background-color: goldenrod;
transform: rotate(0deg);
}
</style>
<script>
var i = 0;
var xz_id;
var sd = 10;
var ids = new Array();
window.onload = function(){
xz = document.getElementById("xz");
a = document.getElementById("body");
mess = document.getElementById("mess");
xz.onclick = function(){
id = setInterval("xuanzhuan()",10);
ids.push(id);
mess.innerHTML = ids.length;
}
document.getElementById("tz").onclick = function(){
clearInterval(ids[ids.length-1]);
ids.pop();
mess.innerHTML = ids.length;
}
}
function xuanzhuan(){
if(i>360){
i=0;
}else{
i++;
}
var s = "rotate("+i+"deg)";
a.style.transform = s;
}
</script>
</head>
<body>
<button id="xz">加速</button>
<button id="tz">减速</button><br />
<span id="mess"></span>
<div id="body">
<div id="a"></div>
<div id="b"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
