Autor publikacji
Virtual Patriot - Administrator

matrix3d()

Data publikacji
Ostatnio edytowano

Przeznaczenie funkcji matrix3d()

Za pomocą funkcji matrix3d() możemy wykonać dowolne dostępne przekształcenie lub przekształcenia w przestrzeni 3D wykorzystując do tego celu tylko jedną funkcję.

Parametry funkcji matrix3d()

Przykładowe zapisy

matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 125, 75, 50, 1)

matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1)

matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 0.5, 0, 125, 75, 50, 1)

Ważne

ostateczną wartość jakiegokolwiek kąta należy podać w radianach, a nie w stopniach

translateX

aby uzyskać ten typ przekształcenia należy manipulować wartością parametru tx funkcja matrix3d() notacja dla funkcji translateX()

translateY

aby uzyskać ten typ przekształcenia należy manipulować wartością parametru ty funkcja matrix3d() notacja dla funkcji translateY()

translate

aby uzyskać ten typ przekształcenia należy manipulować wartością parametru tx oraz wartością parametru ty funkcja matrix3d() notacja dla funkcji translate()

translateZ

aby uzyskać ten typ przekształcenia należy manipulować wartością parametru tz funkcja matrix3d() notacja dla funkcji translateZ()

translate3d

aby uzyskać ten typ przekształcenia należy manipulować wartością parametru tx, wartością parametru ty oraz wartością parametru tz funkcja matrix3d() notacja dla funkcji translate3d()

scaleX

aby uzyskać ten typ przekształcenia należy manipulować wartością parametru x1 funkcja matrix3d() notacja dla funkcji scaleX()

scaleY

aby uzyskać ten typ przekształcenia należy manipulować wartością parametru y2 funkcja matrix3d() notacja dla funkcji scaleY()

scale

aby uzyskać ten typ przekształcenia należy manipulować wartością parametru x1 oraz wartością parametru y2 funkcja matrix3d() notacja dla funkcji scale()

scaleZ

aby uzyskać ten typ przekształcenia należy manipulować wartością parametru z3 funkcja matrix3d() notacja dla funkcji scaleZ()

scale3d

aby uzyskać ten typ przekształcenia należy manipulować wartością parametru x1, wartością parametru y2 oraz wartością parametru z3 funkcja matrix3d() notacja dla funkcji scale3d()

skewX

aby uzyskać ten typ przekształcenia należy manipulować wartością parametru y1. Jako wartość parametru y1 należy podać tangens kąta. funkcja matrix3d() notacja dla funkcji skewX()

skewY

aby uzyskać ten typ przekształcenia należy manipulować wartością parametru x2. Jako wartość parametru x2 należy podać tangens kąta. funkcja matrix3d() notacja dla funkcji skewY()

skew

aby uzyskać ten typ przekształcenia należy manipulować wartością parametru y1 oraz wartością parametru x2. Jako wartość obu parametrów należy podać tangens kąta. funkcja matrix3d() notacja dla funkcji skew()

rotate

aby uzyskać ten typ przekształcenia należy manipulować wartością parametru x1, wartością parametru y2, wartością parametru y1 oraz wartością parametru x2. Jako wartość parametru x1 należy podać cosinus kąta. Jako wartość parametru y2 należy podać cosinus kąta. Jako wartość parametru y1 należy podać -sinus kąta. Jako wartość parametru x2 należy podać sinus kąta. funkcja matrix3d() notacja dla funkcji rotate()

rotateX

aby uzyskać ten typ przekształcenia należy manipulować wartością parametru y2, wartością parametru z3, wartością parametru z2 oraz wartością parametru y3. Jako wartość parametru y2 należy podać cosinus kąta. Jako wartość parametru z3 należy podać cosinus kąta. Jako wartość parametru z2 należy podać -sinus kąta. Jako wartość parametru y3 należy podać sinus kąta. funkcja matrix3d() notacja dla funkcji rotateX()

rotateY

aby uzyskać ten typ przekształcenia należy manipulować wartością parametru x1, wartością parametru z3, wartością parametru x3 oraz wartością parametru z1. Jako wartość parametru x1 należy podać cosinus kąta. Jako wartość parametru z3 należy podać cosinus kąta. Jako wartość parametru x3 należy podać -sinus kąta. Jako wartość parametru z1 należy podać sinus kąta. funkcja matrix3d() notacja dla funkcji rotateY()

rotateZ

aby uzyskać ten typ przekształcenia należy manipulować wartością parametru x1, wartością parametru y2, wartością parametru y1 oraz wartością parametru x2. Jako wartość parametru x1 należy podać cosinus kąta. Jako wartość parametru y2 należy podać cosinus kąta. Jako wartość parametru y1 należy podać -sinus kąta. Jako wartość parametru x2 należy podać sinus kąta. funkcja matrix3d() notacja dla funkcji rotateZ()

x1

Parametr x1 jest wymaganym parametrem funkcji matrix3d(). Parametr x1 jest jednym z szesnastu parametrów funkcji matrix3d(), za pomocą której możemy wykonać interesujące nas przekształcenie w przestrzeni 3D.

Dostępne wartości

dowolna liczba

Wartość domyślna

1

x2

Parametr x2 jest wymaganym parametrem funkcji matrix3d(). Parametr x2 jest jednym z szesnastu parametrów funkcji matrix3d(), za pomocą której możemy wykonać interesujące nas przekształcenie w przestrzeni 3D.

Dostępne wartości

dowolna liczba

Wartość domyślna

0

x3

Parametr x3 jest wymaganym parametrem funkcji matrix3d(). Parametr x3 jest jednym z szesnastu parametrów funkcji matrix3d(), za pomocą której możemy wykonać interesujące nas przekształcenie w przestrzeni 3D.

Dostępne wartości

dowolna liczba

Wartość domyślna

0

wx

Parametr wx jest wymaganym parametrem funkcji matrix3d(). Parametr wx jest jednym z szesnastu parametrów funkcji matrix3d(), za pomocą której możemy wykonać interesujące nas przekształcenie w przestrzeni 3D.

Dostępne wartości

dowolna liczba

Wartość domyślna

0

y1

Parametr y1 jest wymaganym parametrem funkcji matrix3d(). Parametr y1 jest jednym z szesnastu parametrów funkcji matrix3d(), za pomocą której możemy wykonać interesujące nas przekształcenie w przestrzeni 3D.

Dostępne wartości

dowolna liczba

Wartość domyślna

0

y2

Parametr y2 jest wymaganym parametrem funkcji matrix3d(). Parametr y2 jest jednym z szesnastu parametrów funkcji matrix3d(), za pomocą której możemy wykonać interesujące nas przekształcenie w przestrzeni 3D.

Dostępne wartości

dowolna liczba

Wartość domyślna

1

y3

Parametr y3 jest wymaganym parametrem funkcji matrix3d(). Parametr y3 jest jednym z szesnastu parametrów funkcji matrix3d(), za pomocą której możemy wykonać interesujące nas przekształcenie w przestrzeni 3D.

Dostępne wartości

dowolna liczba

Wartość domyślna

0

wy

Parametr wy jest wymaganym parametrem funkcji matrix3d(). Parametr wy jest jednym z szesnastu parametrów funkcji matrix3d(), za pomocą której możemy wykonać interesujące nas przekształcenie w przestrzeni 3D.

Dostępne wartości

dowolna liczba

Wartość domyślna

0

z1

Parametr z1 jest wymaganym parametrem funkcji matrix3d(). Parametr z1 jest jednym z szesnastu parametrów funkcji matrix3d(), za pomocą której możemy wykonać interesujące nas przekształcenie w przestrzeni 3D.

Dostępne wartości

dowolna liczba

Wartość domyślna

0

z2

Parametr z2 jest wymaganym parametrem funkcji matrix3d(). Parametr z2 jest jednym z szesnastu parametrów funkcji matrix3d(), za pomocą której możemy wykonać interesujące nas przekształcenie w przestrzeni 3D.

Dostępne wartości

dowolna liczba

Wartość domyślna

0

z3

Parametr z3 jest wymaganym parametrem funkcji matrix3d(). Parametr z3 jest jednym z szesnastu parametrów funkcji matrix3d(), za pomocą której możemy wykonać interesujące nas przekształcenie w przestrzeni 3D.

Dostępne wartości

dowolna liczba

Wartość domyślna

1

wz

Parametr wz jest wymaganym parametrem funkcji matrix3d(). Parametr wz jest jednym z szesnastu parametrów funkcji matrix3d(), za pomocą której możemy wykonać interesujące nas przekształcenie w przestrzeni 3D.

Dostępne wartości

dowolna liczba

Wartość domyślna

0

tx

Parametr tx jest wymaganym parametrem funkcji matrix3d(). Parametr tx jest jednym z szesnastu parametrów funkcji matrix3d(), za pomocą której możemy wykonać interesujące nas przekształcenie w przestrzeni 3D.

Dostępne wartości

dowolna liczba

Ważne

podana przez nas wartość parametru tx zostanie potraktowana przez przeglądarkę internetową jako wartość wyrażona w pikselach

Wartość domyślna

0

ty

Parametr ty jest wymaganym parametrem funkcji matrix3d(). Parametr ty jest jednym z szesnastu parametrów funkcji matrix3d(), za pomocą której możemy wykonać interesujące nas przekształcenie w przestrzeni 3D.

Dostępne wartości

dowolna liczba

Ważne

podana przez nas wartość parametru ty zostanie potraktowana przez przeglądarkę internetową jako wartość wyrażona w pikselach

Wartość domyślna

0

tz

Parametr tz jest wymaganym parametrem funkcji matrix3d(). Parametr tz jest jednym z szesnastu parametrów funkcji matrix3d(), za pomocą której możemy wykonać interesujące nas przekształcenie w przestrzeni 3D.

Dostępne wartości

dowolna liczba

Ważne

podana przez nas wartość parametru tz zostanie potraktowana przez przeglądarkę internetową jako wartość wyrażona w pikselach

Wartość domyślna

0

w

Parametr w jest wymaganym parametrem funkcji matrix3d(). Parametr w jest jednym z szesnastu parametrów funkcji matrix3d(), za pomocą której możemy wykonać interesujące nas przekształcenie w przestrzeni 3D.

Dostępne wartości

dowolna liczba

Wartość domyślna

1

Występowanie funkcji matrix3d()

  1. transform

Przykład funkcji matrix3d()

  transform:perspective(300px) matrix3d(0.7071067, 0, -0.7071067, 0, 0, 1, 0, 0, 0.7071067, 0, 0.7071067, 0, 0, 0, 0, 1);

Przykładowy element "div" został obrócony w domyślnym kierunku o kąt 45 stopni względem pionowej osi Y, ponieważ do wspomnianego elementu "div" została dodana właściwość "transform" wraz z kombinacją wartości zawierającą między innymi funkcję "matrix3d()", w której to funkcji zostały użyte następujące wartości: "0.7071067, 0, -0.7071067, 0, 0, 1, 0, 0, 0.7071067, 0, 0.7071067, 0, 0, 0, 0, 1".

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) matrix3d(0.7071067, 0, -0.7071067, 0, 0, 1, 0, 0, 0.7071067, 0, 0.7071067, 0, 0, 0, 0, 1);
        margin:0 auto;
        width:300px;
        height:120px;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

Interpretacja funkcji matrix3d()

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 .