29.
|
CSS-də 2D Transforms izah edin. Aşağıdakı kod nümunəsində transform ifadəsini izah edin.
CSS-də 2D Transformaları, HTML elementlərinin yerləşmə və görüntüsünü dəyişdirmək üçün istifadə olunur. Bu transformalar, məsələn, elementlərin sahəsini dəyişdirmək, döndürmək, ölçüsünü dəyişdirmək, və ya əksinə çevirmək kimi əməliyyatları icra edir.
Döndürmə (rotate): Elementi döndərmək üçün istifadə olunur. Döndürmə dərəcələri istənilən istiqamətdə ola bilər.
Ölçüsünü dəyişdirmək (scale): Elementin ölçüsünü böyütmək və ya kiçiltmək üçün istifadə olunur. Bu transformada məsələn, elementin eni və hündürlüyü ayrı-ayrı təyin edilə bilər.
Köçürmək (translate): Elementi səhifə içində köçürmək üçün istifadə olunur. Bu transformada elementin x və y koordinatları müəyyən edilir.
İstiqamət (skew): Elementi mənimsətmək üçün istifadə olunur. Bu transformada elementin x və y koordinatları sahəsi müəyyən edilir.
Nümunə istəsə:
Aşağıdakı nümunə elementi cari mövqeyindən 50 piksel sağa və 100 piksel aşağı aparır: transform: translate(50px, 100px);
Aşağıdakı nümunə elementi saat əqrəbi istiqamətində 20 dərəcə fırladır:transform: rotate(20deg);
Aşağıdakı nümunə elementi orijinal enindən iki dəfə və orijinal hündürlüyündən üç dəfə artırır: transform: scale(2, 3);
Bu kodda, "transform" xüsusiyyəti dörd əməliyyat bir arada istifadə olunur. İşlemler sırasıyla şu şəkildədir:
scale(1.1): HTML elementlərinin ölçüsünü ölçüləndirir. Burada 1.1 ölçeği kullanılmıştır, bu da elementi %10 nisbətində böyüdecektir.
rotate(20deg): HTML elementlərini müəyyən bir açıda döndürür. 20 derece açıda döndürme işlemi uygulanır.
translate(5px, 5px): HTML elementlərini müəyyən bir yatay (5 piksel sağa) ve dikey (5 piksel aşağıya) mesafede konumlandırır.
skew(10deg, 0deg): HTML elementlərini müəyyən bir eğimlə dəyişdirir. Burada 10 derece yatay eğim uygulanır, dikey eğim ise 0 derecedir.
|
