Ostatnio edytowany:

backface-visibility

Autor: Virtual Patriot

Opis właściwości backface-visibility

Za pomocą właściwości backface-visibility możemy określić widzialność tylnej strony interesującego nas elementu HTML.

Dodatkowe techniczne informacje o właściwości backface-visibility

przeznaczenie
  • element HTML każdego typu
dziedziczenie
  • nie
wartość initial
wyjątki initial
  • brak
animowanie
  • nie

Interpretacja właściwości backface-visibility

Firefox

tak

Google Chrome

tak

Safari

tak, lecz z przedrostkiem -webkit-

Opera

tak

Internet Explorer

tak, lecz od wersji 10

Edge

tak

Zobacz więcej informacji o interpretacji właściwości .

Opis wartości właściwości backface-visibility

visible

Opis

Wartość visible jest domyślną wartością właściwości backface-visibility.

Domyślnie tylna strona elementu HTML jest widzialna.

Przykład

div

Tylna strona przykładowego animowanego elementu "div" jest widzialna.

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        animation:moja-animacja-1 5s linear infinite;
        text-align:center;
        width:200px;
        line-height:200px;
        margin:0 auto;
        font-size:3em;
        background-color:#AFF;
      }

      @keyframes moja-animacja-1
      {
          0% { transform:perspective(300px) rotateY(0); }
          100% { transform:perspective(300px) rotateY(360deg); }
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

hidden

Opis

Za pomocą wartości hidden właściwości backface-visibility możemy sprawić, że tylna strona interesującego nas elementu HTML stanie się niewidzialna.

Przykład

div

Tylna strona przykładowego animowanego elementu "div" jest niewidzialna, ponieważ do wspomnianego elementu "div" została dodana właściwość "backface-visibility" wraz z wartością "hidden".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        backface-visibility:hidden;
        -webkit-backface-visibility:hidden;
        animation:moja-animacja-1 5s linear infinite;
        text-align:center;
        width:200px;
        line-height:200px;
        margin:0 auto;
        font-size:3em;
        background-color:#AFF;
      }

      @keyframes moja-animacja-1
      {
          0% { transform:perspective(300px) rotateY(0); }
          100% { transform:perspective(300px) rotateY(360deg); }
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>