Συνάρτηση scale

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

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

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

Σύνταξη

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

Παράδειγμα

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

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: scale(1.5);
}

Результат:

Παράδειγμα

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

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: scale(0.5);
}

Результат:

Παράδειγμα

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

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: scale(2, 1);
}

Результат:

Παράδειγμα

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

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: scale(1, 2);
}

Результат:

Δείτε επίσης