Ostatnio edytowany:

perspective

Autor: Virtual Patriot

Opis 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.

Dodatkowe techniczne informacje o właściwości perspective

przeznaczenie

element HTML każdego typu

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

Opis

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

      #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

Opis

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

      #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>