JS 용법 CSS3의transform 용법 이용, JS는transoform 사용 완료

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>0span>
p>
<p>
RY : <input type="range" min="0" max="360" value="0" name="ry"> <span>0span>
p>
<p>
RZ : <input type="range" min="0" max="360" value="0" name="rz"> <span>0span>
p>
<p>
TX : <input type="range" min="0" max="360" value="0" name="tx"> <span>0span>
p>
<p>
TY : <input type="range" min="0" max="360" value="0" name="ty"> <span>0span>
p>
<p>
TZ : <input type="range" min="0" max="360" value="0" name="tz"> <span>0span>
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);
}