Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / html

Mengatur Gaya Transformasi HTML Menggunakan transformStyle DOM

Dipublikasikan Oleh: elfanmauludi 5 komentar
Properti transformStyle DOM pada HTML merupakan properti yang digunakan untuk mengatur atau mengembalikan elemen bersarang dengan berbagai cara yang digunakan untuk melakukan render ruang 3D.

4 Value Properti transformStyle DOM pada HTML
transformStyle DOM

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

Sintak:
  • mengembalikan nilai properti transformStyle: object.style.transformStyle
  • mengatur nilai properti transformStyle: object.style.transformStyle = "flat|preserve-3d|initial|inherit"

Property Values:
  • flat: merupakan nilai default dari properti, namun nilai ini tidak dipersiapkan untuk elemen child dari posisi 3D.
  • preserve-3d: mengatur nilai elemen child untuk mempertahankan posisi 3D.
  • initial: mengatur nilai properti transformStyle ke nilai default-nya.
  • inherit: menerima nilai turunan properti transformStyle dari elemen parent.

Return Values: berfungsi untuk mengembalikan sebuah nilai string yang merepresentasikan properti transform-style dari suatu elemen.

Baca Juga:

Contoh: memperlihatkan properti flat.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style transformStyle 

DOM pada HTML

</title>

 

<style>

 

#DIV1 

{

padding: 0.4px;

position: absolute;

border: 1px solid black;

background-color: green;

-webkit-transform: rotateY(100deg);

transform: rotateY(50deg);

}

 

#DIV2 

{

padding: 5px;

position: absolute;

border: 1px solid black;

background-color: lightgreen;

-webkit-transform: rotateY(0deg);

transform: rotateY(100deg);

}

</style>

 

</head>

 

<body>

 

<h1>

<center>

Blog

<button 

onclick="mkk1()">

Elfan

</button>

</center>

</h1>

 

<h4>

Klik tombol 'Press' untuk 

mengatur nilai properti 

menjadi flat.

</h4>

 

<div 

id="DIV1">

<h2>Blog Elfan</h2>

<div 

id="DIV2">

<h1>12345</h1>

</div>

</div>

 

<script>

function mkk1() 

{

// Pengaturan style transform 

// untuk Apple Safari.

document.getElementById(

"DIV1").style.WebkitTransformStyle = "flat";

 

// Pengaturan Style transform 

// "flat".

document.getElementById(

"DIV2").style.transformStyle = "flat";

}

</script>

 

</body>

 

</html>


Contoh: memperlihatkan properti 3D yang dipertahankan posisinya.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style transformStyle 

DOM pada HTML

</title>

 

<style>

 

#DIV1 

{

padding: 0.4px;

position: absolute;

border: 1px solid black;

background-color: green;

-webkit-transform: rotateY(100deg);

transform: rotateY(50deg);

}

 

#DIV2 

{

padding: 5px;

position: absolute;

border: 1px solid black;

background-color: lightgreen;

-webkit-transform: rotateY(0deg);

transform: rotateY(100deg);

}

</style>

 

</head>

 

<body>

 

<h1>

<center>

Blog

<button 

onclick="mkn2()">

Elfan

</button>

</center>

</h1>

 

<h4>

Klik tombol 'Press' untuk 

mengatur nilai properti 

menjadi preserve 3D.

</h4>

 

<div id="DIV1">

<h2>Blog TIK</h2>

<div id="DIV2">

<h1>12345</h1>

</div>

</div>

 

<script>

function mkn2() 

{

// Pengaturan properti style 

// Transform untuk Apple 

// Safari.

document.getElementById(

"DIV1").style.WebkitTransformStyle =

"preserve-3d";

 

// Pengaturan "preserve-3d"

document.getElementById(

"DIV2").style.transformStyle =

"preserve-3d";

}

</script>

 

</body>

 

</html>


Contoh: memperlihatkan properti initial.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style transformStyle 

DOM pada HTML

</title>

 

<style>

 

#DIV1 

{

padding: 0.4px;

position: absolute;

border: 1px solid black;

background-color: green;

-webkit-transform: rotateY(100deg);

transform: rotateY(50deg);

}

 

#DIV2 

{

padding: 5px;

position: absolute;

border: 1px solid black;

background-color: lightgreen;

-webkit-transform: rotateY(0deg);

transform: rotateY(100deg);

}

</style>

 

<body>

 

<h1>

<center>

Blog

<button onclick="mkn3()">

Press

</button>

</center>

</h1>

 

<h4>

Klik tombol 'Press' untuk 

mengatur nilai properti 

menjadi initial.

</h4>

 

<div id="DIV1">

<h2>Blog TIK</h2>

<div id="DIV2">

<h1>12345</h1>

</div>

</div>

 

<script>

function mkn3() 

{

// Pengaturan nilai properti 

// style Transform untuk Apple 

// Safari

document.getElementById(

"DIV1").style.WebkitTransformStyle =

"initial";

 

// Pengaturan style "initial" 

// Transform

document.getElementById(

"DIV2").style.transformStyle =

"initial";

}

</script>

 

</body>

 

</html>


Contoh: memperlihatkan properti turunan.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style transformStyle 

DOM pada HTML

</title>

 

<style>

 

#DIV1 

{

padding: 0.4px;

position: absolute;

border: 1px solid black;

background-color: green;

-webkit-transform: rotateY(100deg);

transform: rotateY(50deg);

}

 

#DIV2 

{

padding: 5px;

position: absolute;

border: 1px solid black;

background-color: lightgreen;

-webkit-transform: rotateY(0deg);

transform: rotateY(100deg);

}

 

</style>

 

</head>

 

<body>

 

<h1>

<center>

Blog

<button 

onclick="Bon3()">

Press

</button>

</center>

</h1>

 

<h4>

Klik tombol 'Press' untuk 

mengatur nilai properti 

menjadi inherit.

</h4>

 

<div id="DIV1">

<h2>Blog Elfan</h2>

<div id="DIV2">

<h1>12345</h1></div>

</div>

 

<script>

function Bon3() 

{

// Pengaturan properti 

// Transform untuk Apple 

// Safari.

document.getElementById(

"DIV1").style.WebkitTransformStyle =

"inherit";

 

// Pengaturan properti 

// "inherit" transform.

document.getElementById(

"DIV2").style.transformStyle =

"inherit";

}

</script>

 

</body>

 

</html>


Catatan: Browser Apple Safari tidak mendukung penggunaan properti transformStyle DOM pada HTML.

Artikel ini didedikasikan kepada: Herdina Elok Az-Zahra, Hibatul Azizi Putra Ananta, Hilal Daffa Izzudin, Ika Putri Harini, dan Imanuel Dimas Cahyo Kumoro.
Location: Kota Semarang, Jawa Tengah, Indonesia

5 komentar untuk "Mengatur Gaya Transformasi HTML Menggunakan transformStyle DOM"

  1. AnonimRabu, 31 Agustus 2022 pukul 15.20.00 WIB

    Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti transformStyle DOM pada HTML?

    BalasHapus
    Balasan
    1. AnonimRabu, 31 Agustus 2022 pukul 15.21.00 WIB

      Berikut ini adalah beberapa jenis browser populer yang dapat digunakan untuk mengaktifkan properti transformStyle DOM pada HTML:
      1. Google Chrome
      2. Internet Explorer
      3. Firefox
      4. Opera

      Hapus
  2. AnonimRabu, 14 September 2022 pukul 13.59.00 WIB

    Apa yang dimaksud dengan properti transformStyle DOM yang digunakan pada dokumen HTML?

    BalasHapus
    Balasan
    1. AnonimRabu, 14 September 2022 pukul 14.00.00 WIB

      Properti transformStyle DOM pada HTML merupakan properti yang digunakan untuk mengatur atau mengembalikan elemen bersarang yang di-render dalam ruang tiga dimensi.

      Hapus
    2. AnonimRabu, 14 September 2022 pukul 14.00.00 WIB

      Properti transformStyle DOM pada HTML merupakan properti yang harus digunakan bersamaan dengan properti transformasi.

      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 -