Autor publikacji
Virtual Patriot - Administrator

perspective

Data publikacji
Ostatnio edytowano

Przeznaczenie właściwości perspective

Za pomocą właściwości perspective możemy określić (potrzebny dla przekształceń w przestrzeni 3D) rozmiar perspektywy, w której powinny znaleźć się elementy dzieci interesującego nas elementu HTML, lecz nie on sam.

Informacje dodatkowe

brak

Informacje techniczne o właściwości perspective

przeznaczenie

element HTML każdego typu, lecz nie element HTML typu table-column-group, table-column

pozycja

dowolna

dziedziczenie

nie

wartość initial

none

wyjątki initial

brak

animowanie

tak, lecz tylko wartość rozmiar

Interpretacja właściwości perspective

Firefox

tak

Google Chrome

tak

Safari

tak

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 perspective

none

Wyjaśnienie

Wartość none jest domyślną wartością właściwości perspective.

Domyślnie elementy dzieci elementu HTML nie znajdują się w żadnej perspektywie.

Przykład

  perspective:none;
div#rodzic
div#dziecko

Element "div#dziecko" przykładowego elementu "div#rodzic" nie znajduje się w żadnej perspektywie.

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;
      }

      #rodzic {
        text-align:center;
        width:250px;
        height:250px;
        margin:0 auto;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      #dziecko {
        transform:rotateY(-20deg);
        height:200px;
        background-color:#F00;
      }
    </style>
  </head>

  <body>

    <div id="rodzic">div#rodzic
      <div id="dziecko">div#dziecko</div>
    </div>

  </body>
</html>

rozmiar

Wyjaśnienie

Za pomocą właściwości perspective oraz dowolnej dodatniej liczby wraz z wybraną jednostką absolutną lub jednostką relatywną możemy określić rozmiar perspektywy, w której powinny znaleźć się elementy dzieci interesującego nas elementu HTML, lecz nie on sam.

Przykład

  perspective:300px;
div#rodzic
div#dziecko

Element "div#dziecko" przykładowego elementu "div#rodzic" znalazł się w perspektywie posiadającej rozmiar 300 pikseli, ponieważ do wspomnianego elementu "div#rodzic" została dodana właściwość "perspective" wraz z wartością "300px".

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;
      }

      #rodzic {
        perspective:300px;
        text-align:center;
        width:250px;
        height:250px;
        margin:0 auto;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      #dziecko {
        transform:rotateY(-20deg);
        height:200px;
        background-color:#F00;
      }
    </style>
  </head>

  <body>

    <div id="rodzic">div#rodzic
      <div id="dziecko">div#dziecko</div>
    </div>

  </body>
</html>