JS用法 CSS3的transform的用法利用，JS完成transoform的使用

JS用法 CSS3的transform的用法利用，JS完成transoform的使用

思路指南

1. 需要给每个范围条绑定事件【oninput：表单元素value发生变化的时候就会立即执行一次】
2. 修改范围条的兄弟元素文本
3. 通过JS改变盒模型的样式【主要是修改平移和旋转!]

案例代码部分

设置一个父盒子
<div class="box">
再设置一个子盒子
<div class="cur"></div>
用P标签包裹住input表单元素
<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>

```css
通配符选择器清楚默认样式
<style>
*{
margin:0;
padding:0;
}
利用类名叫box获取父盒子
.box{
设置长度和宽度
width:600px;
height:400px;
设置边框
border:1px solid #333;
让盒子居中
marign:100px auto;
}
利用类名叫cur获取子盒子
.cur{
设置子盒子的宽高
width:600px;
height:200px;
设置背景颜色
background:red;
}
</style>

//匹配获取全部的范围条range
var ranges = document.querySelectorAll(input);
//匹配全部的兄弟元素span
var spans = document.querySelectorAll(span);
//获取节点
var cur = document.querySelectorAll(cur);
//transform中的rotate单位为deg translate的单位是px
var rx = "rotateX(0deg)" , ry = "rotateY(0deg)" , rz ="rotateZ(0deg)" , tx ="translateX(0px)", ty="translateY(0px)",tz ="translateZ(0px)";
//批量添加事件DOM
for(var a = 0; a < ranges.length;a++){
//有6个IIFE，每一个IIFE都有自己的作用域
+function(index){
//批量绑定事件
ranges[index].oninput = function(){
//匹配兄弟元素span
spans[index].innerHTML = this.value;
//通过条件语句区分范围条
//通过范围条的name属性值区分范围
switch(this.name){
case "rx":
rx =`rotateX(${this.value}0deg)`;
break;
case "ry":
ry =`rotateY(${this.value}0deg)`;
break;
case "rz":
rz =`rotateZ(${this.value}0deg)`;
break;
case "tx":
tx =`translateX(${this.value}0px)`;
break;
case "ty":
ty =`translateY(${this.value}0px)`;
break;
case "tz":
tz =`translateZ(${this.value}0px)`;
break;
}
//修改盒子css属性
cur.style.transfomr = rx + " " + ry + " " + rz + " "+ tx + " " + ty + " " + tz;  
}
}(a);
}