backface-visibility w CSS3

By /

CSS

Właściwość CSS backface-visibility określa, czy tylna strona elementu jest widoczna, gdy nie jest zwrócona bezpośrednio do widza. Jest to szczególnie przydatne w animacjach i transformacjach, gdzie elementy obracają się w przestrzeni 3D. Dzięki tej właściwości możemy kontrolować wyświetlanie tylnych stron elementów, co pozwala na tworzenie bardziej złożonych i interaktywnych efektów wizualnych na stronach internetowych.

Przykład użycia backface-visibility

Poniższy przykład demonstruje użycie backface-visibility poprzez stworzenie prostego efektu flip card, gdzie po najechaniu myszką na element, karta obraca się, ukazując tylną stronę.

Kod HTML i CSS
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przykład wykorzystania backface-visibility w CSS3</title>
    <style>
        .card {
            width: 200px;
            height: 300px;
            perspective: 1000px;
            margin: 50px;
        }
        .cardInner {
            width: 100%;
            height: 100%;
            transition: transform 0.6s;
            transform-style: preserve-3d;
            cursor: pointer;
        }
        .card:hover .cardInner {
            transform: rotateY(180deg);
        }
        .cardFront, .cardBack {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: white;
            border-radius: 10px;
        }
        .cardFront {
            background: rebeccapurple;
        }
        .cardBack {
            background: darkslateblue;
            transform: rotateY(180deg);
        }
    </style>
</head>
<body>

<div class="card">
    <div class="cardInner">
        <div class="cardFront">
            Przód
        </div>
        <div class="cardBack">
            Tył
        </div>
    </div>
</div>

</body>
</html>

Opis kodu

  • .card: Kontener dla karty. Ustawiamy perspective, aby nadać głębię 3D.
  • .cardInner: Wewnętrzny kontener karty, który będzie obracany. transform-style: preserve-3d zapewnia, że dzieci tego elementu są pozycjonowane w przestrzeni 3D.
  • .cardFront i .cardBack: Front i tył karty. Używamy backface-visibility: hidden; aby ukryć tylną stronę elementu, gdy jest on obrócony.
  • Obrót karty jest wyzwalany przez pseudoklasę :hover na .card, co powoduje obrót .cardInner o 180 stopni wokół osi Y.

Podsumowanie

Właściwość backface-visibility w CSS3 umożliwia tworzenie interesujących efektów wizualnych, takich jak obracające się karty czy inne elementy z efektami 3D. Daje to twórcom stron internetowych większe możliwości w zakresie interakcji i animacji, wzbogacając doświadczenie użytkownika. Kluczowym aspektem jest odpowiednie zastosowanie tej właściwości w połączeniu z innymi technikami CSS3, takimi jak transformacje, aby osiągnąć pożądany efekt.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video WebDeveloper w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Powiązane artykuły

Scroll to Top