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;
js控制css3动画触发
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属性
ansfomr = rx +" "+ ry +" "+ rz +" "+ tx +" "+ ty +" "+ tz;
}
}(a);
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。