287 of 313 menu

Συνάρτηση scale

Η συνάρτηση scale κλιμακώνει ένα στοιχείο: το αυξάνει ή το μειώνει κατά πολλαπλάσιο. Η κλιμάκωση πραγματοποιείται γύρω από ένα σημείο, που ορίζεται από την ιδιότητα transform-origin.

Μπορεί να δεχτεί μία ή δύο παραμέτρους, που χωρίζονται με κόμμα. Εάν υπάρχουν δύο παράμετροι - η πρώτη παράμετρος ορίζει την κλιμάκωση οριζόντια, και η δεύτερη - κάθετα. Εάν υπάρχει μόνο μία παράμετρος τότε ορίζει την κλιμάκωση τόσο οριζόντια όσο και κάθετα ταυτόχρονα.

Ως τιμή των παραμέτρων χρησιμοποιείται ακέραιος ή δεκαδικός αριθμός. Εάν είναι μεγαλύτερος από 1 - το στοιχείο μεγεθύνεται, εάν είναι μικρότερος (για παράδειγμα, 0.5) - το στοιχείο μικραίνει. Εάν οριστεί 1 - τίποτα δεν αλλάζει (αυτή είναι και η προεπιλεγμένη τιμή).

Σύνταξη

επιλογέας { transform: scale(ένας ή δύο αριθμοί); }

Παράδειγμα

Όταν ο δείκτης βρίσκεται πάνω από το μπλοκ, θα αυξήσουμε την κλίμακα κατά 1.5 φορές και στους δύο άξονες:

<div id="elem">lorem ipsum</div> #elem { border: 1px solid black; width: 100px; height: 50px; } #elem:hover { transform: scale(1.5); }

:

Παράδειγμα

Θα μειώσουμε την κλίμακα κατά 2 φορές και στους δύο άξονες:

<div id="elem">lorem ipsum</div> #elem { border: 1px solid black; width: 100px; height: 50px; } #elem:hover { transform: scale(0.5); }

:

Παράδειγμα

Θα αυξήσουμε την κλίμακα κατά 2 φορές στον άξονα X:

<div id="elem">lorem ipsum</div> #elem { border: 1px solid black; width: 100px; height: 50px; } #elem:hover { transform: scale(2, 1); }

:

Παράδειγμα

Θα αυξήσουμε την κλίμακα κατά 2 φορές στον άξονα Y:

<div id="elem">lorem ipsum</div> #elem { border: 1px solid black; width: 100px; height: 50px; } #elem:hover { transform: scale(1, 2); }

:

Δείτε επίσης

  • τη συνάρτηση scaleX,
    που ορίζει κλιμάκωση στον άξονα X
  • τη συνάρτηση scaleY,
    που ορίζει κλιμάκωση στον άξονα Y
Ελληνικά
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Χρησιμοποιούμε cookie για τη λειτουργία του ιστότοπου, την ανάλυση και την εξατομίκευση. Η επεξεργασία των δεδομένων γίνεται σύμφωνα με την Πολιτική Απορρήτου.
αποδοχή όλων ρύθμιση απόρριψη