matrix3d()
CSS matrix3d() funksiyasi 16 ta qiymatdan iborat 4x4 matritsa yordamida 3D transformatsiyani belgilaydi:
| matrix3d() = |
|
Misol
<div> elementi uchun 3D transformatsiyani belgilashda matrix3d() funksiyasidan foydalaning:
.div1 {
transform: matrix3d(
0.7, 0.1, 0.7, 0,
-0.6, 0.7, 0.2, 0,
-0.5, -0.8, 0.7, 0,
10, 10, 0, 1
);
font-size: 30px;
font-weight: bold;
width: 280px;
padding: 10px;
background: beige;
font-family: verdana;
border: 1px solid green;
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar funksiyani to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Funksiya | |||||
|---|---|---|---|---|---|
| matrix3d() | 12 | 12 | 10 | 4 | 15 |
CSS sintaksisi
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
| Qiymat | Tavsif |
|---|---|
| a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3 | Majburiy. Chiziqli transformatsiyani belgilaydigan sonlar |
| a4 b4 c4 d4 | Majburiy. Qo‘llaniladigan transformatsiyani belgilaydigan sonlar |
| Versiya: | CSS Transforms moduli, 2-daraja |
|---|
Ko‘proq misollar
Misol
<div> elementi uchun boshqa bir 3D transformatsiya yaratishda matrix3d() funksiyasidan foydalaning:
.div1 {
font-size: 30px;
font-weight: bold;
width: 280px;
height: 40px;
padding: 10px;
background: beige;
font-family: verdana;
border: 1px solid green;
transform-style: preserve-3d;
transition: transform 1.5s;
transform: rotate3d(1, 1, 1, 30deg);
margin: 50px auto;
}
.div1:hover,
.div1:focus {
transform: rotate3d(1, 1, 1, 30deg)
matrix3d(1, 0, 0, 0, 0, 1, 6, 0, 0, 0, 1, 0, 50, 100, 0, 1.1);
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS ma’lumotnomasi: CSS transform xususiyati.
CSS ma’lumotnomasi: CSS matrix() funksiyasi.
CSS darsligi: CSS 3D transformatsiyalari.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!