Files
KOJIO6OK/вращать-изображение.html
2021-03-15 23:37:43 +03:00

41 lines
1.2 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>X: <input id="x" type="number" min="-360" max="360" value="0"></p>
<p>Y: <input id="y" type="number" min="-360" max="360" value="0"></p>
<p>Z: <input id="z" type="number" min="-360" max="360" value="0"></p>
<br>
<br>
<br>
<br>
<p><img id="изо" src="вещи/перекладины.png"></p>
<script>
function rotate3D()
{
var x = document.getElementById("x").value;
var y = document.getElementById("y").value;
var z = document.getElementById("z").value;
var изо = document.getElementById("изо");
изо.style.transform = `rotateX(${x}deg) rotateY(${y}deg) rotateZ(${z}deg)`;
}
var x = document.getElementById("x");
x.oninput = function() {
rotate3D();
}
var y = document.getElementById("y");
y.oninput = function() {
rotate3D();
}
var z = document.getElementById("z");
z.oninput = function() {
rotate3D();
}
rotate3D();
</script>
</body>
</html>