transformOrigin Style HTML DOM dan Fungsinya
Sebelum memahami lebih dalam materi tentang transformOrigin Style HTML DOM dan Fungsinya, terlebih dahulu pelajari materi tentang: Mengatur Transformasi HTML Menggunakan Transform Style DOM, Mengatur Nilai Posisi Atas HTML Menggunakan Top Style DOM, dan Mengatur Transformasi Teks HTML Menggunakan textTransform 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
- 3 Value Properti transitionDelay Style DOM pada HTML
- 5 Value Properti unicodeBidi Style DOM pada HTML
- 4 Value Properti userSelect Style DOM pada HTML
- 12 Value Property verticalAlign Style DOM pada HTML
- 5 Value Properti Visibility Style DOM pada HTML
- 5 Value Properti Width Style DOM pada HTML
5 komentar untuk "transformOrigin Style HTML DOM dan Fungsinya"
Hubungi admin melalui Wa : +62-896-2414-6106
Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.
Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.
- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -
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