translate
Ta’rif va qo‘llanilishi
translate xususiyati elementlarning joylashuvini o‘zgartirish imkonini beradi.
translate xususiyati elementning 2D dagi x va y koordinatalarini belgilaydi. Joylashuvni 3D da o‘zgartirish uchun z koordinatasini ham belgilashingiz mumkin.
Koordinatalar faqat x koordinatasi, x va y koordinatalari yoki x, y va z koordinatalari ko‘rinishida berilishi mumkin.
translate xususiyatini yaxshiroq tushunish uchun namoyishni ko‘ring.
Maslahat: z qiymati ta’sir qilishi uchun CSS perspective xususiyatiga qiymat belgilashingiz kerak.
Eslatma: Elementni siljitishning muqobil usuli — CSS transform xususiyatini CSS translate() funksiyasi bilan ishlatish. Ushbu sahifada tushuntirilgan CSS translate xususiyati esa elementni siljitishning, ehtimol, oddiyroq va bevositaroq usulidir.
| Standart qiymat: | none |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | ha. animatable haqida o‘qing Sinab ko‘ring |
| Versiya: | CSS3 |
| JavaScript sintaksisi: | object.style.translate="10px 20px" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| translate | 104 | 104 | 72 | 14.1 | 90 |
CSS sintaksisi
translate: x-axis y-axis z-axis|initial|inherit;
Xususiyat qiymatlari
| Xususiyat qiymati | Tavsif | Demo |
|---|---|---|
| x-axis | x o‘qidagi joylashuvni belgilaydi. Mumkin bo‘lgan qiymatlar:
|
Demo ❯ |
| y-axis | y o‘qidagi joylashuvni belgilaydi. Mumkin bo‘lgan qiymatlar:
|
Demo ❯ |
| z-axis | z o‘qidagi joylashuvni belgilaydi. Mumkin bo‘lgan qiymatlar:
|
Demo ❯ |
| 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
Misol
translate xususiyati z o‘qi uchun o‘rnatilganda, biror effektni ko‘rishimiz uchun ota elementga perspective xususiyati ham o‘rnatilishi kerak:
DIV1 {
perspective: 200px;
}
DIV2 {
translate: 50px 50px 50px;
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS 2D transformatsiyalari
CSS darsligi: CSS 3D transformatsiyalar
CSS scale xususiyati: CSS scale xususiyati
CSS rotate xususiyati: CSS rotate xususiyati
CSS perspective xususiyati: CSS perspective xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!