Cara membuat Rotate real time example
February 22, 2022
dalam tutorial ini, Anda akan belajar bagaimana menggunakan JavaScript untuk memutar objek gambar/box
Berikut source nya
Pertama buat file index.html,salin Dan pastekan kode html di bawah ini
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css" media="all">
</style>
<body>
</body>
</html>Salin kode CSS dibawah ini dan pastekan di bawah <style>
.clsbox {
width: 100px;
height: 100px;
background: red;Setelah itu salin kode di bawah ini dan pastekan di bawah <body>
<div class="clsbox"></div>
Rotate X
<input min="0" value="0" max="180" step="10" oninput="call_fun1(this.value);" type="range" />
Rotate Y
<input min="0" value="0" max="180" step="10" oninput="call_fun2(this.value);" type="range" />
Rotate Z
<input min="0" value="0" max="180" step="10" oninput="call_fun3(this.value);" type="range" />Dan terakhir salin kode javascript di bawah ini dan pastekan di atas </body>
<script>
function call_fun1(val)
{
document.getElementsByClassName("clsbox")[0].style.transform = "rotateX(" + val + "deg)";
}
function call_fun2(val)
{
document.getElementsByClassName("clsbox")[0].style.transform = "rotateY(" + val + "deg)";
}
function call_fun3(val)
{
document.getElementsByClassName("clsbox")[0].style.transform = "rotateZ(" + val + "deg)";
}
</script>kode lengkap seperti di bawah ini
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.clsbox {
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div class="clsbox"></div>
Rotate X
<input min="0" value="0" max="180" step="10" oninput="call_fun1(this.value);" type="range" />
Rotate Y
<input min="0" value="0" max="180" step="10" oninput="call_fun2(this.value);" type="range" />
Rotate Z
<input min="0" value="0" max="180" step="10" oninput="call_fun3(this.value);" type="range" />
<script>
function call_fun1(val)
{
document.getElementsByClassName("clsbox")[0].style.transform = "rotateX(" + val + "deg)";
}
function call_fun2(val)
{
document.getElementsByClassName("clsbox")[0].style.transform = "rotateY(" + val + "deg)";
}
function call_fun3(val)
{
document.getElementsByClassName("clsbox")[0].style.transform = "rotateZ(" + val + "deg)";
}
</script>
</body>
</html>