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)

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.

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.

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.

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.

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.

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.

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 .