1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } .box { width: 400px; height: 400px; margin: 100px auto; border: 1px dashed black; } .cur { width: 400px; height: 100px; background: red; } p { margin-top: 10px; } </style> </head> <body>
<div class="box"> <div class="cur"></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> </div>
<script> let ranges = document.querySelectorAll("input"); let spans = document.querySelectorAll("span"); let cur = document.querySelector(".cur"); let rx = `rotateX(0deg)`; let ry = `rotateY(0deg)`; let rz = `rotateZ(0deg)`; let tx = `translateX(0px)`; let ty = `translateY(0px)`; let tz = `translateZ(0px)`; for (let i = 0; i < ranges.length; i++) { +function (index) { ranges[i].oninput = function() { spans[i].innerHTML = this.value; 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.style.transform = `${rx} ${ry} ${rz} ${tx} ${ty} ${tz}`; } }(i) }
</script>
</body> </html>
|