transform
Misol
Uchta turli <div> elementini aylantiring, qiyshaytiring va masshtablang:
div.a {
transform: rotate(20deg);
}
div.b {
transform: skewY(20deg);
}
div.c {
transform: scaleY(1.5);
}
O‘zingiz sinab ko‘ring »
Ta’rif va qo‘llanilishi
transform xususiyati elementga 2D yoki 3D transformatsiyani qo‘llaydi. Bu xususiyat elementlarni aylantirish, masshtablash, siljitish, qiyshaytirish va hokazolar imkonini beradi.
| Standart qiymat: | none |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | ha. animatable haqida o‘qing Sinab ko‘ring |
| Versiya: | CSS3 |
| JavaScript sintaksisi: | object.style.transform="rotate(7deg)" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| transform | 36 | 12 | 16 | 9 | 23 |
Sintaksis
transform: none|transform-functions|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif | Demo |
|---|---|---|
| none | Transformatsiya bo‘lmasligini belgilaydi | Demo ❯ |
| matrix(n,n,n,n,n,n) | Olti qiymatli matritsa yordamida 2D transformatsiyani belgilaydi | Demo ❯ |
| matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) |
16 ta qiymatdan iborat 4x4 matritsa yordamida 3D transformatsiyani belgilaydi | |
| translate(x,y) | 2D siljitishni (translation) belgilaydi | Demo ❯ |
| translate3d(x,y,z) | 3D siljitishni belgilaydi | |
| translateX(x) | Faqat X o‘qi qiymatidan foydalanib siljitishni belgilaydi | |
| translateY(y) | Faqat Y o‘qi qiymatidan foydalanib siljitishni belgilaydi | |
| translateZ(z) | Faqat Z o‘qi qiymatidan foydalanib 3D siljitishni belgilaydi | |
| scale(x,y) | Elementni gorizontal va vertikal bo‘yicha (kenglik va balandlik) masshtablaydi | Demo ❯ |
| scale3d(x,y,z) | 3D masshtablash transformatsiyasini belgilaydi | |
| scaleX(x) | Elementni gorizontal bo‘yicha (kengligini) masshtablaydi | Demo ❯ |
| scaleY(y) | Elementni vertikal bo‘yicha (balandligini) masshtablaydi | Demo ❯ |
| scaleZ(z) | Z o‘qi uchun qiymat berib, 3D masshtablash transformatsiyasini belgilaydi | |
| rotate(angle) | 2D aylantirishni belgilaydi, burchak parametrda ko‘rsatiladi | Demo ❯ |
| rotate3d(x,y,z,angle) | 3D aylantirishni belgilaydi | Demo ❯ |
| rotateX(angle) | X o‘qi bo‘ylab 3D aylantirishni belgilaydi | Demo ❯ |
| rotateY(angle) | Y o‘qi bo‘ylab 3D aylantirishni belgilaydi | Demo ❯ |
| rotateZ(angle) | Z o‘qi bo‘ylab 3D aylantirishni belgilaydi | Demo ❯ |
| skew(ax,ay) | X va Y o‘qlari bo‘ylab 2D qiyshaytirish transformatsiyasini belgilaydi | Demo ❯ |
| skewX(a) | X o‘qi bo‘ylab 2D qiyshaytirish transformatsiyasini belgilaydi | Demo ❯ |
| skewY(a) | Y o‘qi bo‘ylab 2D qiyshaytirish transformatsiyasini belgilaydi | Demo ❯ |
| perspective(n) | 3D transformatsiya qilingan element uchun perspektiv ko‘rinishni belgilaydi | |
| initial | Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing | |
| inherit | Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing |
Ko‘proq misollar
Stolga tashlangan rasmlar
Bu misol "polaroid" suratlarni yaratish va ularni aylantirishni ko‘rsatadi.
Tegishli sahifalar
CSS darsligi: CSS 2D transformatsiyalari
CSS darsligi: CSS 3D transformatsiyalar
HTML DOM ma’lumotnomasi: transform xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!