Ostatnio edytowany:

perspective()

Autor: Virtual Patriot

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.

Dostępne wartości

dowolna dodatnia liczba wraz z wybraną jednostką absolutną lub jednostką relatywną

Wartość domyślna

brak

perspective(300px)

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

Właściwości CSS dla 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:#CBFFFF;
      }
    </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 .