Lompat ke konten Lompat ke sidebar Lompat ke footer

transformOrigin Style HTML DOM dan Fungsinya

Properti Style transformOrigin DOM pada HTML merupakan properti yang digunakan untuk mengubah posisi dari HTML div. Properti ini digunakan berdasarkan asumsi bahwa setiap elemen HTML memiliki beberapa posisi pada layar komputer, dimana posisi ini dideskripsikan menggunakan koordinat geotmetri terhadap sumbut X dan sumbu Y. Properti transformOrigin juga membantu jika diterapkan apda proses transformasi 2D dan 3D.

5 Value Properti transformOrigin Style DOM pada HTML
transformOrigin Style DOM

Sebelum memahami lebih dalam materi tentang transformOrigin Style HTML DOM dan Fungsinya, terlebih dahulu pelajari materi tentang: Mengatur Transformasi HTML Menggunakan Transform Style DOM [klik], Mengatur Nilai Posisi Atas HTML Menggunakan Top Style DOM [klik], dan Mengatur Transformasi Teks HTML Menggunakan textTransform Style DOM [klik].

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.

Baca Juga:

Values Property:
  • 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>

Output:

Artikel ini didedikasikan kepada: Handryca Taufik Shaputra, Herdina Elok Az-Zahra, Hibatul Azizi Putra Ananta, Hilal Daffa Izzudin, dan Ika Putri Harini.

5 komentar untuk "transformOrigin Style HTML DOM dan Fungsinya"

  1. Jenis browser apa saja yang dapat digunakan oleh para pengembang situs untuk mengaktifkan properti transformOrigin Style DOM pada HTML?

    BalasHapus
    Balasan
    1. Berikut ini beberapa jenis browser populer yang biasa digunakan untuk mengaktifkan transformOrigin Style DOM pada HTML:
      a. Google Chrome
      b. Edge
      c. Firefox
      d. Opera

      Hapus
  2. Apa yang dimaksud dengan properti transformOrigin Style DOM yang terdapat pada dokumen HTML?

    BalasHapus
    Balasan
    1. Properti transformOrigin Style DOM pada HTML merupakan properti yang memungkinkan user untuk melakukan perubahan posisi pada elemen yang akan diubah.

      Hapus
    2. Elemen 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

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 -