translate


Misol

Element joylashuvini o‘zgartiring:

div {   translate: 100px 20px; }
O‘zingiz sinab ko‘ring »

ULASHISH

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.

Demoni ko‘rsatish ❯

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:
  • length
  • %
Demo ❯
y-axis y o‘qidagi joylashuvni belgilaydi. Mumkin bo‘lgan qiymatlar:
  • length
  • %
Demo ❯
z-axis z o‘qidagi joylashuvni belgilaydi. Mumkin bo‘lgan qiymatlar:
  • length
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!