这段代码还是非常简单，是看了一个老师的视频受的启发，也是调用了很多个函数，所以比较杂乱吧！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>翻转调节器</title>
<style type="text/css">
#container{
-webkit-transform: -webkit-transform 1s linear;
-webkit-perspective: 800px;
-webkit-perspective-origin: 50% 50%;
-webkit-transform-style: -webkit-preserve-3d;
}
#squre{
width: 150px;
height: 150px;
background-color: #00BB00;
margin: 20px auto;
border-radius: 0;
}
.circle{
float: left;
}
.p1,.p2{
width: 50px;
border-radius: 10px;
}
#op{
font-size: 16px;
font-weight: bold;
color: gray;
width: 800px;
margin: 100px auto;
}
#op .change{
width: 721px;
}
</style>
</head>
<body>
<div id="container">
<div id="squre"></div>
</div>
<button name="button" id="circle" class="circle" onclick="circle()">圆形</button>
<input type="text" id="width" class="p1" placeholder="宽"></input>
<input type="text" id="height" class="p2" placeholder="高"></input>
<button onclick="rec()">确定</button>
<button name="button" id="color" class="color" onclick="changecolor()">改个颜色</button>
<div id="op">
<p>rotate x: <span id="lolx">0</span> deg</p>
<input type="range" min="-360" max="360" id="changeX" value="0" class="change" onchange="rotate()" /><br/>
<p>rotate y: <span id="loly">0</span> deg</p>
<input type="range" min="-360" max="360" id="changeY" value="0" class="change" onchange="rotate()" /><br/>
<p>rotate z: <span id="lolz">0</span> deg</p>
<input type="range" min="-360" max="360" id="changeZ" value="0" class="change" onchange="rotate()" /><br/>
</div>
<script type="text/javascript">
function circle(){
var circle=document.getElementById('squre');
circle.style.borderRadius="75px";
circle.style.width='150px';
squre.style.height='150px';
}
function rec(){
var squre=document.getElementById('squre');
var wid=document.getElementById('width').value;
var hei=document.getElementById('height').value;
squre.style.height=hei+'px';
squre.style.width=wid+'px';
squre.style.borderRadius='0';
}
/*这里是一个闭包的随机颜色代码*/
var getRandomColor = function(){
return '#' +
(function(color){
return (color += '0123456789abcdef'[Math.floor(Math.random()*16)])
&& (color.length == 6) ? color : arguments.callee(color);
})('');
}
function changecolor(){
var color=document.getElementById('squre');
color.style.backgroundColor=getRandomColor();
}
function rotate(){
var x = document.getElementById("changeX").value;
var y = document.getElementById("changeY").value;
var z = document.getElementById("changeZ").value;
document.getElementById('squre').style.webkitTransform = "rotateX("+x+"deg) rotateY("+y+"deg) rotateZ("+z+"deg)";
document.getElementById('lolx').innerText = x;
document.getElementById('loly').innerText = y;
document.getElementById('lolz').innerText = z;
}
</script>
</body>
</html>
