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 funkcjiperspective()
. Parametrvalue
określa rozmiar perspektywy elementu HTML.
perspective(300px)
Występowanie funkcji 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().