Właściwość CSSTransformacje
backface-visibility
Decyduje, czy widać tył elementu obróconego w 3D.
- Wartość domyślna
visible- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- elementy transformowalne
- JavaScript
element.style.backfaceVisibility = "hidden"
Przykład
#CSS
.card { transform-style: preserve-3d; transition: transform 0.6s; }
.card.flipped { transform: rotateY(180deg); }
.face { backface-visibility: hidden; position: absolute; inset: 0; }
.back { transform: rotateY(180deg); }HTML przykładu
<style>
.flip { perspective: 700px; width: 180px; height: 110px; margin: 8px auto; }
.flip .card { position: relative; height: 100%; transform-style: preserve-3d; transition: transform .6s; }
.flip .face { position: absolute; inset: 0; backface-visibility: hidden; display: grid; place-items: center; border-radius: 12px; font-weight: 700; }
.flip .front { background: #7c3aed; }
.flip .back { background: #0ea5e9; transform: rotateY(180deg); }
</style>
<div class="flip"><div class="card"><div class="face front">Pytanie</div><div class="face back">Odpowiedź</div></div></div>
<script>
const card = document.querySelector('.flip .card')
setInterval(() => {
card.style.transform = card.style.transform ? '' : 'rotateY(180deg)'
}, 1600)
</script>Podgląd
Definicja i zastosowanie
#Gdy obrócisz element o więcej niż 90 stopni w osi X lub Y, zobaczysz jego tył, czyli lustrzane odbicie przodu. Właściwość backface-visibility: hidden ukrywa ten tył.
To podstawa efektu odwracanej karty: dwie warstwy, przód i tył, ułożone jedna na drugiej. Tył jest wstępnie obrócony o 180 stopni, a obie strony mają ukryty rewers. Po obróceniu całej karty widać raz jedną, raz drugą stronę.
Właściwość działa tylko w kontekście 3D, zwykle z transform-style: preserve-3d na rodzicu.
Składnia
#Składnia
backface-visibility: visible | hidden;Wartości
#Wartości w praktyce
#visible
Po obrocie widać lustrzane odbicie napisu.
.demo { backface-visibility: visible; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Do odwracanych kart potrzebujesz trzech rzeczy:
perspectivena kontenerze,preserve-3dna karcie ibackface-visibility: hiddenna stronach. - Starsze Safari wymagały przedrostka
-webkit-backface-visibility.
Powiązane hasła
#- transform-styleDecyduje, czy dzieci elementu żyją we wspólnej przestrzeni 3D, czy są spłaszczane.
- perspectiveDodaje głębię transformacjom 3D dzieci elementu.
- rotateObraca element o podany kąt, niezależnie od właściwości transform.
- transformPrzesuwa, obraca, skaluje lub pochyla element bez wpływu na układ strony.
Widzisz błąd albo brakuje przykładu? Napisz do nas.