transform-origin
Misol
Aylantirilgan elementning asosiy joylashuv nuqtasini o‘rnating:
div {
transform: rotate(45deg);
transform-origin: 20% 40%;
}
O‘zingiz sinab ko‘ring »
Ta’rif va qo‘llanilishi
transform-origin xususiyati transformatsiya qilingan elementlarning joylashuvini o‘zgartirish imkonini beradi.
2D transformatsiyalar elementning x va y o‘qlarini o‘zgartira oladi. 3D transformatsiyalar esa elementning z o‘qini ham o‘zgartira oladi.
transform-origin xususiyatini yaxshiroq tushunish uchun namoyishni ko‘ring.
Eslatma: Bu xususiyat transform xususiyati bilan birga ishlatilishi kerak.
Maslahat: Bu xususiyatni 3D transformatsiyalar uchun yaxshiroq tushunish maqsadida namoyishni ko‘ring.
| Standart qiymat: | 50% 50% 0 |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | ha. animatable haqida o‘qing Sinab ko‘ring |
| Versiya: | CSS3 |
| JavaScript sintaksisi: | object.style.transformOrigin="0 0" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| transform-origin | 36 | 12 | 16 | 9 | 23 |
CSS sintaksisi
transform-origin: x-axis y-axis z-axis|initial|inherit;
Xususiyat qiymatlari
| Xususiyat qiymati | Tavsif |
|---|---|
| x-axis | Ko‘rish nuqtasi x o‘qida qayerda joylashishini belgilaydi. Mumkin bo‘lgan qiymatlar:
|
| y-axis | Ko‘rish nuqtasi y o‘qida qayerda joylashishini belgilaydi. Mumkin bo‘lgan qiymatlar:
|
| z-axis | Ko‘rish nuqtasi z o‘qida qayerda joylashishini belgilaydi (3D transformatsiyalar uchun). Mumkin bo‘lgan qiymatlar:
|
| initial | Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing |
| inherit | Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing |
Tegishli sahifalar
CSS darsligi: CSS 2D transformatsiyalari
CSS darsligi: CSS 3D transformatsiyalar
HTML DOM ma’lumotnomasi: transformOrigin xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!