DAFTAR LABEL POPULER PENELITIAN.ID

Jangan Buka Artikel Ini!

Mengatur Gaya Transformasi HTML Menggunakan transformStyle DOM

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.

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:


4 Value Properti transformStyle DOM pada HTML
transformStyle DOM

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.

Komentar

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

    BalasHapus
    Balasan
    1. 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. Apa yang dimaksud dengan properti transformStyle DOM yang digunakan pada dokumen HTML?

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

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

      Hapus

Posting Komentar

Hubungi admin melalui Wa : +62-896-2514-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 ~

Postingan populer dari blog ini (30 Hari)

Specifier %d dan %i Bahasa C dan Fungsinya

Enkapsulasi Java dan Fungsinya

4 Kesalahan Umum yang Sering Terjadi pada PTK

Cara Membuat Drag and Drop pada HTML

Postingan populer dari blog ini (All Time)

Enkapsulasi Java dan Fungsinya

Komunitas