scale3d()
CSS scale3d() funksiyasi transform xususiyati ichida ishlatiladi va elementning x, y va z o‘qlari bo‘ylab berilgan darajada 3D masshtablanishini belgilaydi.
Eslatma: 3D fazoni faollashtirish uchun elementga perspective kerak. Perspektivasiz har qanday 3D transformatsiya tekis va ikki o‘lchamli ko‘rinadi.
Misol
Bir nechta <div> elementini masshtablash uchun scale3d() funksiyasidan foydalaning:
.container {
perspective: 500px; /* Creates the 3D space */
}
.box1 {
transform: scale3d(0.8, 0.8, 0.8);
}
.box2 {
transform: scale3d(-0.5, -0.5, -0.5);
}
.box3 {
transform: scale3d(1.1, 1.2, 1);
}
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 | |||||
|---|---|---|---|---|---|
| scale3d() | 12 | 12 | 10 | 4 | 15 |
CSS sintaksisi
scale3d(sx, sy, sz)
| Qiymat | Tavsif |
|---|---|
| sx | Kenglik uchun masshtablash vektorini belgilaydigan musbat yoki manfiy son |
| sy | Balandlik uchun masshtablash vektorini belgilaydigan musbat yoki manfiy son |
| sz | z yo‘nalishi uchun masshtablash vektorini belgilaydigan musbat yoki manfiy son |
| Versiya: | CSS Transforms moduli, 2-daraja |
|---|
Ko‘proq misollar
Misol
Rasmlarni masshtablash uchun scale3d() funksiyasidan foydalaning:
.container {
perspective: 500px; /* Creates the 3D space */
}
.img1 {
transform: scale3d(0.8, 0.8, 0.8);
}
.img2 {
transform: scale3d(-0.5, -0.5, -0.5);
}
.img3 {
transform: scale3d(1.1, 1.1, 1);
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS ma’lumotnomasi: CSS transform xususiyati.
CSS ma’lumotnomasi: CSS perspective xususiyati.
CSS ma’lumotnomasi: CSS rotate3d() funksiyasi.
CSS ma’lumotnomasi: CSS rotateX() funksiyasi.
CSS ma’lumotnomasi: CSS rotateY() funksiyasi.
CSS ma’lumotnomasi: CSS rotateZ() funksiyasi.
CSS darsligi: CSS 3D transformatsiyalari.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!