matrix3d() в CSS — тривимірна матриця у властивості transform
Опис
автор: Bond
Загальний опис
автор: NagarD
- Порада
-
Використовуйте функцію
автор: Bondmatrix3d()для складних 3D-трансформацій, які неможливо досягти за допомогою інших функцій CSS. - Порада
-
Докладніше ознайомтесь з математичними принципами застосування 3D-матриць трансформацій для досягнення потрібного ефекту.
автор: Bond - Порада
-
Будьте уважними при використанні функції
автор: Bondmatrix3d(), оскільки складні трансформації можуть впливати на продуктивність та відображення елементів.
Синтаксис
matrix3d(n1, n2, n3, n4, n5, n6, n7, n8, n9, n10, n11, n12, n13, n14, n15, n16);Функція matrix3d може отримувати 3 значень:
-
<number> -
Ці числа представляють різні елементи матриці трансформації та можуть бути від'ємними, десятковими тощо.
автор: Bond -
<function> -
Функції, такі як deg(), rad(), turn(), можуть бути використані для задання кутів обертання.
автор: Bond -
<definition> -
Математичні вирази можуть бути використані для обчислення значень в межах функції
автор: Bondmatrix3d().
| Значення без задання: | matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) |
|---|
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 12 | 10 | 4 | 15 | 12 | 10 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 3 | 18 | 10 | 3.2 |
Приклади
+ запропонувати свій приклад у пісочниці
Два однакові елементи, але один з них має змінений масштаб після застосування функції matrix3d().
HTML
<div id="description">
<h2>Приклад 2: зміна масштабу елемента за допомогою функції matrix3d()</h2>
<p>Два однакові елементи, але один з них має змінений масштаб після застосування функції matrix3d().</p>
</div>
<div id="result">
<div class="element"></div>
<div class="element transformed"></div>
</div>CSS
#description {
background: #f2f2f2;
padding: 20px;
font-family: Arial, sans-serif;
}
#result {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
.element {
width: 100px;
height: 100px;
background-color: #ff6347;
margin-right: 20px;
}
.transformed {
background-color: #6495ed;
transform: matrix3d(0.8, 0, 0.2, 0, 0, 0.8, 0, 0, -0.2, 0, 0.8, 0, 0, 0, 0, 1);
}При наведенні курсору на елемент, він змінює свою позицію та масштаб у тривимірному просторі.
HTML
<div id="description">
<h2>Приклад 1: зміна елемента за допомогою функції matrix3d()</h2>
<p>При наведенні курсору на елемент, він змінює свою позицію та масштаб у тривимірному просторі.</p>
</div>
<div id="result">
<div class="element"></div>
</div>CSS
#description {
background: #f2f2f2;
padding: 20px;
font-family: Arial, sans-serif;
}
#result {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
.element {
width: 100px;
height: 100px;
background-color: #ff6347;
transition: transform 0.3s ease;
}
.element:hover {
transform: matrix3d(1.2, 0.2, 0, 0, 0, 1.2, 0, 0, 0, 0, 1.2, 0, 0, 0, 0, 1);
}Сім однакових коробок під різними матрицями: одинична, чистий зсув на 50 і 20, поворот на 45 градусів, дзеркало по горизонталі, зкіс, і пара «перспектива всередині матриці» проти звичайного perspective(400px) translateZ(-100px) — вони дають однаковий розмір. Остання коробка з п'ятнадцятьма числами: оголошення відкинуто, перетворення немає.
HTML
<div class="grid">
<figure>
<div class="pad"><div class="box m0">1</div></div>
<figcaption>одинична матриця — без змін</figcaption>
</figure>
<figure>
<div class="pad"><div class="box m1">2</div></div>
<figcaption>…, 50, 20, 0, 1 — зсув 50px праворуч і 20px вниз</figcaption>
</figure>
<figure>
<div class="pad"><div class="box m2">3</div></div>
<figcaption>0.71, 0.71, …, -0.71, 0.71 — поворот на 45°</figcaption>
</figure>
<figure>
<div class="pad"><div class="box m3">4</div></div>
<figcaption>-1 у першому слоті — дзеркало по горизонталі</figcaption>
</figure>
<figure>
<div class="pad"><div class="box m4">5</div></div>
<figcaption>0.4 у другому слоті — зкіс по вертикалі</figcaption>
</figure>
<figure>
<div class="pad"><div class="box m5">6</div></div>
<figcaption>-0.0025 у дванадцятому слоті + зсув по Z — перспектива
всередині матриці</figcaption>
</figure>
<figure>
<div class="pad"><div class="box m6">7</div></div>
<figcaption>perspective(400px) translateZ(-100px) — той самий розмір</figcaption>
</figure>
<figure>
<div class="pad"><div class="box bad">8</div></div>
<figcaption>15 чисел замість 16 — оголошення відкинуто</figcaption>
</figure>
</div>CSS
.grid {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
figure {
margin: 0;
width: 200px;
}
figcaption {
margin-top: 6px;
color: #5a6472;
font: 12px/1.35 ui-monospace, monospace;
}
.pad {
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 130px;
background: #f6f9ff;
border: 1px solid #b9c6d8;
}
.box {
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 60px;
background: #2f6fd0;
color: #fff;
font: 700 18px/1 ui-monospace, monospace;
}
.m0 { transform: matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1); }
.m1 { transform: matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, 50,20,0,1); }
.m2 { transform: matrix3d(0.71,0.71,0,0, -0.71,0.71,0,0, 0,0,1,0, 0,0,0,1); }
.m3 { transform: matrix3d(-1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1); }
.m4 { transform: matrix3d(1,0.4,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1); }
.m5 {
transform: matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,-0.0025, 0,0,0,1) translateZ(-100px);
background: #3a9a4f;
}
.m6 {
transform: perspective(400px) translateZ(-100px);
background: #3a9a4f;
}
.bad {
transform: matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, 50,20,0);
background: #d64545;
}Коментарі
Коментарів ще немає — будьте першим!