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

visible

wyjątki initial

brak

animowanie

nie (animacja nieciągła)

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

  backface-visibility:visible;
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:#CBFFFF;
      }

      @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

  backface-visibility:hidden;
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 {
        animation:moja-animacja-1 5s linear infinite;
        backface-visibility:hidden;
        -webkit-backface-visibility:hidden;
        text-align:center;
        width:200px;
        line-height:200px;
        margin:0 auto;
        font-size:3em;
        background-color:#CBFFFF;
      }

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

  <body>

    <div>div</div>

  </body>
</html>