rotate3d()
- Data publikacji
- Ostatnio edytowano
Przeznaczenie funkcji rotate3d()
Za pomocą funkcji rotate3d()
możemy wykonać przekształcenie w przestrzeni 3D. Wspomniane przekształcenie polega na obrocie elementem HTML względem wektora 3D wyznaczonego przez stosunek długości wektorów znajdujących się na osi X, osi Y oraz osi Z.
Parametry funkcji rotate3d()
- Przykładowe zapisy
-
rotate3d(1, 1, 1, 45deg)
rotate3d(1, 2.5, 3, 75deg)
rotate3d(-1, 2, 1, -0.75turn)
rotate3d(-1, -1, -1, 100grad)
rotate3d(1, 0, 0, 1.57rad)
- x
-
Parametr
x
jest wymaganym parametrem funkcjirotate3d()
. Parametrx
określa długość wektora X. - y
-
Parametr
y
jest wymaganym parametrem funkcjirotate3d()
. Parametry
określa długość wektora Y. - z
-
Parametr
z
jest wymaganym parametrem funkcjirotate3d()
. Parametrz
określa długość wektora Z. - angle
-
Parametr
angle
jest wymaganym parametrem funkcjirotate3d()
. Parametrangle
określa wielkość obrotu elementem HTML względem wektora 3D wyznaczonego przez stosunek długości wektorów znajdujących się na osi X, osi Y oraz osi Z.
rotate3d(1, 1, 1, 45deg)
Występowanie funkcji rotate3d()
Przykład funkcji rotate3d()
transform:perspective(300px) rotate3d(1, 1, 1, 45deg);
Przykładowy element "div" został obrócony w domyślnym kierunku o kąt 45 stopni względem wektora 3D wyznaczonego przez stosunek długości wektorów znajdujących się na osi X, osi Y oraz osi Z, ponieważ do wspomnianego elementu "div" została dodana właściwość "transform" wraz z kombinacją wartości zawierającą między innymi funkcję "rotate3d()", w której to funkcji zostały użyte następujące wartości: "1, 1, 1, 45deg".
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) rotate3d(1, 1, 1, 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 rotate3d()
-
tak
-
tak
-
tak
-
tak
-
tak, lecz od wersji 10
-
tak
Zobacz więcej informacji o interpretacji funkcji rotate3d().