Συνάρτηση 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);
}
: