Ostatnio edytowany:
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()
- 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 funkcjimatrix()
. Parametrx1
jest jednym z sześciu parametrów funkcjimatrix()
, 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 funkcjimatrix()
. Parametrx2
jest jednym z sześciu parametrów funkcjimatrix()
, 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 funkcjimatrix()
. Parametry1
jest jednym z sześciu parametrów funkcjimatrix()
, 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 funkcjimatrix()
. Parametry2
jest jednym z sześciu parametrów funkcjimatrix()
, 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 funkcjimatrix()
. Parametrtx
jest jednym z sześciu parametrów funkcjimatrix()
, 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 funkcjimatrix()
. Parametrty
jest jednym z sześciu parametrów funkcjimatrix()
, 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()
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().