transformOrigin Style HTML DOM dan Fungsinya
 |
| transformOrigin Style DOM |
Sintak:
- digunakan untuk mengatur properti transformOrigin: object.style.transformOrigin="x-value y-value"
- digunakan untuk mengembalikan nilai properti transformOrigin: object.style.transformOrigin
Return Values: merupakan properti yang digunakan untuk mengembalikan nilai sebuah string yang merepresentasikan properti transform-origin dari suatu elemen.
- x-axis: Nilai yang ditempatkan dari sumbu x.
- y-axis: Nilai yang ditempatkan dari sumbu y.
- z-axis: Nilai yang ditempatkan dari sumbu y pada objek 3D.
- initial: Mengatur nilai default dari elemen.
- inherit: Menerima nilai turunan dari elemen parent.
Contoh: Ubah nilai awal circle 2.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style transformOrigin
DOM pada HTML
</title>
<script>
// Script untuk menemukan
// elemen dengan ID circle2
// dan melakukan transformasi
// posisi ke origin
function myFunction()
{
document.getElementById(
"circle2").style.transformOrigin =
"0 0";
}
</script>
<style>
#circle1
{
height: 150px;
width: 150px;
margin: auto;
border: 1px solid black;
border-radius: 50%;
}
#circle2
{
width: 150px;
height: 150px;
border: 1px solid black;
background-color: #0f9d58;
transform: rotate(45deg);
border-radius: 50%;
}
#circle3
{
position: absolute;
width: 150px;
height: 150px;
border: #0f9d58;
background-color: #0f9d58;
opacity: 0.5;
border-radius: 50%;
}
</style>
</head>
<body>
<button
onclick="myFunction()">
Submit
</button>
<div id="circle1">
<div id="circle2"></div>
<div id="circle3"></div>
</div>
</body>
</html>
- 5 Value Properti transitionTimingFunction Style DOM pada HTML [klik]
- 3 Value Properti transitionDelay Style DOM pada HTML [klik]
- 5 Value Properti unicodeBidi Style DOM pada HTML [klik]
- 4 Value Properti userSelect Style DOM pada HTML [klik]
- 12 Value Property verticalAlign Style DOM pada HTML [klik]
- 5 Value Properti Visibility Style DOM pada HTML [klik]
- 5 Value Properti Width Style DOM pada HTML [klik]
Jenis browser apa saja yang dapat digunakan oleh para pengembang situs untuk mengaktifkan properti transformOrigin Style DOM pada HTML?
BalasHapusBerikut ini beberapa jenis browser populer yang biasa digunakan untuk mengaktifkan transformOrigin Style DOM pada HTML:
Hapusa. Google Chrome
b. Edge
c. Firefox
d. Opera
Apa yang dimaksud dengan properti transformOrigin Style DOM yang terdapat pada dokumen HTML?
BalasHapusProperti transformOrigin Style DOM pada HTML merupakan properti yang memungkinkan user untuk melakukan perubahan posisi pada elemen yang akan diubah.
HapusElemen transformasi 2D dapat mengubah posisi sumbu X dan sumbu Y pada elemen dengan menggunakan properti transformOrigin Style DOM pada HTML. Juga, elemen transformasi 3D juga dapat dilakukan perubahan dengan mengubah posisi dari sumbu Z pada elemen.
Hapus