Mengatur Tampilan HTML Menggunakan backfaceVisibility DOM
 | |
|
- berfungsi untuk mengembalikan nilai properti backfaceVisibility: object.style.backfaceVisibility
- berfungsi untuk mengatur nilai dari properti backfaceVisibility: object.style.backfaceVisibility = "visible|hidden|initial|inherit"
Property Values:
- visible: digunakan untuk menampilkan nilai dan merupakan nilai default dari properti backfaceVisibility, serta membantu untuk menampilkan backside.
- hidden: digunakan untuk menyembunyikan nilai yang akan membuat bagian backside tidak terlihat.
- initial: merupakan nilai inisial yang digunakan untuk mengatur properti backfaceVisibility ke nilai default-nya.
- inherit: digunakan untuk menerima nilai turunan properti dari elemen parent-nya.
Return Values: berfungsi untuk mengembalikan sebuah string yang merepresentasikan sifat dari properti backfaceVisibility dari suatu elemen.
Contoh: pengaturan backfaceVisibility dari visible ke hidden.
<!DOCTYPE html>
<html>
<head>
<title>
Properti HTML Style
backfaceVisibility DOM
</title>
<style>
div
{
width: 200px;
height: 200px;
background: green;
color: white;
/* Chrome, Safari, Opera */
-webkit-animation: mymove 3s infinite linear alternate;
animation: mymove 3s infinite linear alternate;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove
{
to {-webkit-transform: rotateX(180deg);}
}
@keyframes mymove
{
to {transform: rotateX(180deg);}
}
</style>
</head>
<body>
<p>
Select/deselect tanda checkbox
untuk mengubah
backface-visibility dari
animasi elemen.
</p>
<div
id="myMNN1">
<h1>
Blog Elfan
</h1>
</div>
<input
type="checkbox"
onclick="flip(this)"
checked>
backface-visibility
<script>
function flip(x)
{
if (x.checked === true) {
// Kode program untuk browser
// Chrome, Safari, dan Opera.
document.getElementById(
"myMNN1").style.WebkitBackfaceVisibility =
"visible";
document.getElementById(
"myMNN1").style.backfaceVisibility =
"visible";
}
else {
// Kode program untuk browser
// Chrome, Safari, dan Opera.
document.getElementById(
"myMNN1").style.WebkitBackfaceVisibility =
"hidden";
document.getElementById(
"myMNN1").style.backfaceVisibility =
"hidden";
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style
backfaceVisibility DOM pada
HTML
</title>
<style>
div
{
width: 100px;
height: 100px;
background: green;
color: white;
-webkit-animation: mymove 2s infinite linear alternate;
/* Chrome, Safari, Opera */
animation: mymove 2s infinite linear alternate;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove
{
to {-webkit-transform: rotateY(180deg);}
}
@keyframes mymove
{
to {transform: rotateY(180deg);}
}
</style>
</head>
<body>
<p>
Select/deselect tanda centang
untuk mengubah
backface-visibility dari
elemen animasi:
</p>
<div
id="myMKN2">
<h1>
Blog Elfan
</h1>
</div>
<input
type="checkbox"
onclick="flip(this)"
checked>
backface-visibility
<script>
function flip(x)
{
if (x.checked === true) {
// Kode program untuk Chrome,
// Safari, dan Opera.
document.getElementById(
"myMKN2").style.WebkitBackfaceVisibility =
"visible";
document.getElementById(
"myMKN2").style.backfaceVisibility =
"visible";
}
else {
// Kode program untuk Chrome,
// Safari, dan Opera.
document.getElementById(
"myMKN2").style.WebkitBackfaceVisibility =
"hidden";
document.getElementById(
"myMKN2").style.backfaceVisibility =
"hidden";
}
}
</script>
</body>
</html>
- 4 Value Properti borderBottomRightRadius Style DOM pada HTML [klik]
- 12 Value Properti borderBottomStyle DOM pada HTML [klik]
- 6 Value Properti borderBottomWidth Style DOM pada HTML [klik]
- 4 Value Properti Style borderCollapse DOM pada HTML [klik]
- 4 Value Properti borderColor Style DOM pada HTML [klik]
- 7 Value Properti borderImage Style DOM pada HTML [klik]
- 5 Contoh Penggunaan Properti borderImageOutset Style DOM pada HTML [klik]
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti backfaceVisibility DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti backfaceVisibility DOM pada HTML:
Hapus1. Google Chrome 36.0 12.0 Webkit
2. Internet Explorer 10.0/Edge
3. Mozilla Firefox 16.0 10.0 Moz
4. Opera 23.0 15.0 Webkit
5. Apple Safari 4.0 Webkit
Apa yang dimaksud dengan properti backfaceVisibility Style DOM pada HTML?
BalasHapusProperti backfaceVisibility Style DOM pada HTML digunakan untuk menentukan apakah suatu elemen harus terlihat atau tidak ketika menghadap layar monitor atau screen.
HapusApa fungsi utama dari properti backfaceVisibility Style DOM pada HTML?
BalasHapusProperti backfaceVisibility Style DOM pada HTML berguna ketika sebuah elemen sedang diputar, dan tidak ingin dilihat bagian belakangnya.
Hapus