1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
window.addEventListener("DOMContentLoaded", function() { var scene = document.getElementById("scene"); prev_x = 0; prev_y = -45; function rotate(x, y) { if (x != null) prev_x = x; else x = prev_x; if (y != null) prev_y = y; else y = prev_y; var tf = "perspective(500px) rotateX(" + x + "deg) rotateY(" + y + "deg)"; scene.style.webkitTransform = tf; scene.style.transform = tf; } var v_angle_list = document.getElementById("v-angle").children; [].forEach.call(v_angle_list, function(v_angle, index) { if (index == 1) v_angle.checked = true; v_angle.addEventListener("click", function () { var rot_x = 20 * (index - 1); rotate(rot_x, null); }); }); var h_angle = document.getElementById("h-angle").children[0]; h_angle.addEventListener("input", function() { var rot_y = this.value; rotate(null, rot_y); }); });