Widoczność z tyłu - CSS-Tricks

Ta backface-visibilitywłaściwość dotyczy przekształceń 3D. Dzięki transformacjom 3D można obrócić element, aby to, co uważamy za „przód” elementu, nie było już skierowane w stronę ekranu. Na przykład spowoduje to odwrócenie elementu od ekranu:

.flip ( transform: rotateY(180deg); )

Będzie wyglądać tak, jakbyś podniósł ją szpatułką i odwrócił jak naleśnik. Dzieje się tak, ponieważ wartość domyślna backface-visibilityto visible. Zamiast być widocznym, możesz to ukryć.

.flip ( transform: rotateY(180deg); backface-visibility: hidden; )

Prosty przykład:

Zobacz Pen FjwGA autorstwa Chrisa Coyiera (@chriscoyier) na CodePen.

Jest to przydatne podczas wykonywania efektów 3D. Na przykład:

Działa poprawnie

Przód tył

Problem w WebKit, ponieważ widoczność od tyłu nie jest ukryta

Przód tył

Nie jest to problematyczne w Firefoksie z jakiegokolwiek powodu, chociaż właściwość działa w ten sam sposób.

Przedrostki

Obsługa przeglądarek Firefox 10+ i IE 10+ backface-visibilitybez prefiksu. Opera (post Blink, 15+), Chrome, Safari, iOS i Android - wszystkie potrzebują -webkit-backface-visibility.

Wartości

widoczny (domyślnie) - element będzie zawsze widoczny, nawet jeśli nie jest skierowany w stronę ekranu.
ukryty - element nie jest widoczny, gdy nie jest skierowany w stronę ekranu.
dziedziczenie - właściwość otrzyma swoją wartość z elementu nadrzędnego.
początkowa - ustawia właściwość na jej wartość domyślną, czyli visible.

Więcej informacji

Tester 3D CSS
Spec
Dokumenty Mozilli

Wsparcie przeglądarki

Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.