Mengatur Gaya Transformasi HTML Menggunakan 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, Mengatur Transformasi HTML Menggunakan Transform Style DOM, dan Mengatur Nilai Posisi Atas HTML Menggunakan Top Style DOM.
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.
<!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>
<!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>
<!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>
<!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>
- 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 Value Properti wordBreak Style DOM pada HTML
5 komentar untuk "Mengatur Gaya Transformasi HTML Menggunakan transformStyle DOM"
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 -
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti transformStyle DOM pada HTML?
BalasHapusBerikut ini adalah beberapa jenis browser populer yang dapat digunakan untuk mengaktifkan properti transformStyle DOM pada HTML:
Hapus1. Google Chrome
2. Internet Explorer
3. Firefox
4. Opera
Apa yang dimaksud dengan properti transformStyle DOM yang digunakan pada dokumen HTML?
BalasHapusProperti transformStyle DOM pada HTML merupakan properti yang digunakan untuk mengatur atau mengembalikan elemen bersarang yang di-render dalam ruang tiga dimensi.
HapusProperti transformStyle DOM pada HTML merupakan properti yang harus digunakan bersamaan dengan properti transformasi.
Hapus