CSS transform generatoru

Necə istifadə etmək olar

1. translate, rotate, scale və skew ilə kartı dəyişin — qırıq xətli kontur ilkin yerdə qalır.
2. transform-origin seçin — elementin ətrafında fırlanıb ölçüsünü dəyişdiyi nöqtə; onu qırmızı nöqtə göstərir.
3. «3D» işarəsini qoyun: rotateX, rotateY və valideynin perspective dəyəri əlavə olunur.
4. «none-dan animasiya et» düyməsi transformasiyasız vəziyyətdən sizin nəticəyə keçidi göstərir, sonra «Kopyala» düyməsini basın.

Bu necə işləyir

Dörd 2D funksiya

translate(x, y) elementi sürüşdürür, rotate(bucaq) saat əqrəbi istiqamətində fırladır, scale(x, y) böyüdür və ya kiçildir (scale(-1) güzgü effekti verir), skew(x, y) isə əyir. Transformasiya yalnız çəkilişi dəyişir: elementin axındakı ilkin yeri tutulmuş qalır, qonşular yerindən tərpənmir — qırıq xətli kontur məhz bunu göstərir. translate-də faizlər elementin öz ölçüsündən hesablanır, ona görə translate(-50%, -50%) mərkəzləmənin klassik üsuludur.

Funksiyaların ardıcıllığı vacibdir

Hər funksiya əvvəlkilərin artıq dəyişdiyi koordinat sistemində işləyir. translateX(100px) rotate(45deg) əvvəlcə elementi 100px sağa sürüşdürür, sonra yerindəcə fırladır. rotate(45deg) translateX(100px) isə əvvəlcə oxları fırladır, element əyilmiş ox boyunca 100px — diaqonal hərəkət edir. Generator funksiyaları sabit ardıcıllıqla yazır: translate, rotateX, rotateY, rotate, scale, skew.

/* sağa sürüşür, sonra yerindəcə fırlanır */
transform: translateX(100px) rotate(45deg);

/* əvvəl fırlanır, sonra diaqonal sürüşür */
transform: rotate(45deg) translateX(100px);

transform-origin: fırlanma nöqtəsi

Susmaya görə başlanğıc nöqtə elementin mərkəzidir (50% 50%). rotate və scale bu nöqtəni yerindən tərpətmir, ona görə transform-origin: top left elementi sol üst küncü ətrafında fırladır. Dəyər açar sözləri, faizləri və uzunluqları qəbul edir.

transform-origin: top left;
transform-origin: 20% 80%;

3D: perspective, rotateX və rotateY

rotateX elementi irəli-geri əyir, rotateY isə sola-sağa çevirir. perspective olmadan görüntü yastı qalır. perspective-i valideynə verin: dəyər nə qədər kiçikdirsə, dərinlik hissi bir o qədər güclüdür. Eyni effekti bir element daxilində transform siyahısının əvvəlində perspective() funksiyası ilə də almaq olar.

.parent  { perspective: 600px; }
.element { transform: rotateX(25deg) rotateY(-20deg); }

Ayrıca xassələr: translate, rotate, scale

Müasir brauzerlər translate, rotate və scale-i müstəqil xassələr kimi də dəstəkləyir. Onlar translate, rotate, scale, sonra isə transform ardıcıllığı ilə tətbiq olunur, ona görə bütün transform siyahısını yenidən yazmadan onlardan birini dəyişmək və ya animasiya etmək olar. Bütün əsas brauzerlərdə 2022-ci ildən dəstəklənir.

.element {
  translate: 40px 20px;
  rotate: 15deg;
  scale: 1.1;
}

Tez-tez verilən suallar