Properti backface-visibility menentukan apakah sisi “belakang” elemen yang ditransformasikan terlihat saat menghadap penampil.

Wajah belakang elemen biasanya memiliki latar belakang transparan, membiarkan, ketika terlihat, gambar cermin dari wajah depan ditampilkan.

Ini digunakan bersamaan dengan transformasi CSS ketika sebuah elemen diputar dalam ruang tiga dimensi sehingga wajah depannya tidak lagi menghadap ke layar, dan sebaliknya wajah belakangnya menghadapinya. Misalnya, menerapkan rotasi sekitar sumbu y 180 ° (misalnya) akan menyebabkan sisi belakang elemen menghadap ke penampil. Ini tidak berpengaruh pada transformasi dua dimensi.

Properti ini berguna ketika kalian menempatkan dua elemen secara berurutan, seperti halnya kalian akan membuat kartu bermain. Saat kartu dibalik, kalian tidak ingin konten wajah depan dapat terlihat melalui wajah belakang. Tanpa properti ini, elemen depan dan belakang dapat berpindah tempat pada saat animasi untuk membalik kartu. Ini juga berguna saat membuat kubus di ruang tiga dimensi. Lihat bagian Demo Langsung di bawah ini untuk contoh langsung.

Official Syntax

  • Syntax:
  • Initial: visible
  • Animatable: no

Values:

visible: Menunjukkan bahwa wajah belakang elemen terlihat, dan dengan demikian wajah depan menunjukkan melaluinya.

hidden: Menunjukkan bahwa wajah belakang tersembunyi dan oleh karena itu wajah depan tidak terlihat.

Contoh:

Dalam contoh ini, kami akan membuat contoh flip kartu menggunakan properti visibilitas backface. Markup terdiri dari sebuah wadah yang berisi dua elemen yang akan kita tumpuk satu sama lain, saling berhadapan. Kami akan menerapkan properti visibilitas backface ke dua elemen ini, dan kemudian ketika wadah melayang, kedua elemen akan diputar dalam ruang tiga dimensi, dengan demikian menunjukkan “sisi lain kartu”. Dalam demo langsung di bawah ini, Anda dapat melihat contoh ini secara langsung.

CSS dengan komentar yang menjelaskan setiap langkah adalah sebagai berikut: