Autor publikacji: Virtual Patriot - Administrator

perspective()

Data publikacji: Styczeń 02 2017
Ostatnio edytowano: Wrzesień 07 2020

Zobacz również: w3.org - the perspective function (LV2)

Przeznaczenie funkcji `perspective()`

Za pomocą funkcji perspective() możemy określić (potrzebny dla przekształceń w przestrzeni 3D) rozmiar perspektywy interesującego nas elementu HTML.

Parametry funkcji `perspective()`

            value

Przykładowe zapisy

perspective(300px)

perspective(20em)

perspective(10cm)

value

Parametr value jest wymaganym parametrem funkcji perspective(). Parametr value określa rozmiar perspektywy elementu HTML.

przekształcenie elementu HTML za pomocą funkcji perspective() — `perspective(300px)`

Występowanie funkcji `perspective()`

transform #perspective()

Przykład funkcji `perspective()`

  transform:perspective(300px) rotateX(45deg);

Dzięki temu, że do przykładowego elementu "div" została dodana właściwość "transform" wraz z następującą kombinacją wartości: "perspective(300px) rotateX(45deg)", do wspomnianego elementu "div" została dodana perspektywa o rozmiarze 300 pikseli, a wspomniany element "div" mógł zostać obrócony w przestrzeni 3D względem poziomej osi X o kąt 45 stopni.

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 {
        transform:perspective(300px) rotateX(45deg);
        margin:0 auto;
        width:300px;
        height:120px;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

Interpretacja funkcji `perspective()`

: tak
: tak
: tak
: tak
: tak, lecz od wersji 10
: tak

Zobacz więcej informacji o interpretacji funkcji perspective().