Analiza funkcji matrix()

Przeznaczenie funkcji `matrix()`

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

Parametry funkcji `matrix()`

            x1, x2,
y1, y2,
tx, ty

Przykładowe zapisy

matrix(1, 0, 0, 1, 100, 50)

matrix(0.5, 0, 0, 0.5, 0, 0)

matrix(0.5, 0, 0, 0.5, 100, 50)

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
translateY: aby uzyskać ten typ przekształcenia należy manipulować wartością parametru ty
translate: aby uzyskać ten typ przekształcenia należy manipulować wartością parametru tx oraz wartością parametru ty
scaleX: aby uzyskać ten typ przekształcenia należy manipulować wartością parametru x1
scaleY: aby uzyskać ten typ przekształcenia należy manipulować wartością parametru y2
scale: aby uzyskać ten typ przekształcenia należy manipulować wartością parametru x1 oraz wartością parametru y2
skewX: aby uzyskać ten typ przekształcenia należy manipulować wartością parametru y1. Jako wartość parametru y1 należy podać tangens kąta.
skewY: aby uzyskać ten typ przekształcenia należy manipulować wartością parametru x2. Jako wartość parametru x2 należy podać tangens kąta.
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.
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.

x1

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

Dostępne wartości: dowolna liczba
Wartość domyślna: 1

x2

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

Dostępne wartości: dowolna liczba
Wartość domyślna: 0

y1

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

Dostępne wartości: dowolna liczba
Wartość domyślna: 0

y2

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

Dostępne wartości: dowolna liczba
Wartość domyślna: 1

tx

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

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 matrix(). Parametr ty jest jednym z sześciu parametrów funkcji matrix(), za pomocą której możemy wykonać interesujące nas przekształcenie w przestrzeni 2D.

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

Właściwości CSS dla funkcji `matrix()`

transform #matrix()

Przykład funkcji `matrix()`

  transform:matrix(0.8660254, 0.5, -0.5, 0.8660254, 0, 0);

Przykładowy element "div" został obrócony w prawo o kąt 30 stopni względem punktu zero, ponieważ do wspomnianego elementu "div" została dodana właściwość "transform" wraz z wartością w postaci funkcji "matrix()", w której to funkcji zostały użyte następujące wartości: "0.8660254, 0.5, -0.5, 0.8660254, 0, 0".

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

  <body>

    <div>div</div>

  </body>
</html>

Interpretacja funkcji `matrix()`

: tak
: tak
: tak
: tak
: tak, lecz od wersji 9
: tak

Zobacz więcej informacji o interpretacji funkcji matrix().