Autor publikacji
Virtual Patriot - Administrator

perspective()

Data publikacji
Ostatnio edytowano

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()

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.

perspective(300px)

przekształcenie elementu HTML za pomocą funkcji perspective()

Występowanie funkcji perspective()

  1. transform

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()

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 10

Edge

tak

Zobacz więcej informacji o interpretacji funkcji .