1。给每一个范围条绑定【input】事件
2.修改范围条的兄弟元素文本
3.通过js动态修改盒子形态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
200px;
height: 200px;
border:2px dashed black;
perspective: 1000px;
}
.cur{
200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class=box>
<div class='cur'></div>
</div>
<p>
RX:<input type='range' min='0' max='360' value='0' name='rx'><span>0</span>
</p>
<p>
RY:<input type='range' min='0' max='360' value='0' name='ry'><span>0</span>
</p>
<p>
RZ:<input type='range' min='0' max='360' value='0' name='rz'><span>0</span>
</p>
<p>
TX<input type='range' min='0' max='360' value='0' name='tx'><span>0</span>
</p>
<p>
TY<input type='range' min='0' max='360' value='0' name='ty'><span>0</span>
</p>
<p>
TZ<input type='range' min='0' max='360' value='0' name='tz'><span>0</span>
</p>
</body>
</body>
</html>
<script>
//获取全部input标签
var ranges = document.querySelectorAll('input');
var spans = document.querySelectorAll('span');
var cur = document.querySelectorAll('.cur');
var rx = 'rotateX(0deg)',ry = 'rotateY(0deg)', rz = 'rotateZ(0deg)',tx = 'translateX(0px)',ty = 'translateY(0px)',tz = 'translateZ(0px)'
//批量添加事件
for(var i = 0;i<ranges.length;i++){
+function(index){
ranges[index].oninput=function(){
//修改span标签对应的文本
spans[index].innerHTML = this.value;
//通过范围条的name属性值区分范围条
switch(this.name){
case 'rx':
rx = `rotateX(${this.value}deg)`;
break;
case 'ry':
ry = `rotateY(${this.value}deg)`;
break;
case 'rz':
rz = `rotateZ(${this.value}deg)`;
break;
case 'tx':
tx = `translateX(${this.value}px)`;
break;
case 'ty':
ty = `translateY(${this.value}px)`;
break;
case 'tz':
tz = `translateZ(${this.value}px)`;
break;
}
cur[0].style.transform = rx+' '+ry+' '+rz+' '+tx+' '+ty+' '+tz;
}
}(i);
}
</script>
