Autor publikacji
Virtual Patriot - Administrator

matrix()

Data publikacji
Ostatnio edytowano

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

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 funkcja matrix() notacja dla funkcji translateX()

translateY

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

translate

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

scaleX

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

scaleY

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

scale

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

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 matrix() 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 matrix() 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 matrix() 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 matrix() notacja dla funkcji rotate()

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

Występowanie funkcji matrix()

  1. transform

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:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

Interpretacja funkcji matrix()

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 9

Edge

tak

Zobacz więcej informacji o interpretacji funkcji .