Autor publikacji
Virtual Patriot - Administrator

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 funkcji rotate3d(). Parametr x określa długość wektora X.

y

Parametr y jest wymaganym parametrem funkcji rotate3d(). Parametr y określa długość wektora Y.

z

Parametr z jest wymaganym parametrem funkcji rotate3d(). Parametr z określa długość wektora Z.

angle

Parametr angle jest wymaganym parametrem funkcji rotate3d(). Parametr angle 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)

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

Występowanie funkcji rotate3d()

  1. transform

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

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 .