JS用法 CSS3的transform的用法利用,JS完成transoform的使用
思路指南
- 需要给每个范围条绑定事件【oninput:表单元素value发生变化的时候就会立即执行一次】
- 修改范围条的兄弟元素文本
- 通过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>
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 a = 0; a < ranges.length;a++){
+function(index){
ranges[index].oninput = function(){
spans[index].innerHTML = this.value;
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;
}
cur.style.transfomr = rx + " " + ry + " " + rz + " "+ tx + " " + ty + " " + tz;
}
}(a);
}