Συνάρτηση rotate
Η συνάρτηση rotate() ορίζει την περιστροφή ενός στοιχείου
κατά μια δεδομένη γωνία. Χρησιμοποιείται σε συνδυασμό
με την ιδιότητα transform.
Ως τιμή της ιδιότητας χρησιμοποιείται μια γωνία σε οποιεσδήποτε μονάδες
γωνιών. Μια θετική τιμή περιστρέφει
δεξιόστροφα, μια αρνητική - αριστερόστροφα.
Η περιστροφή πραγματοποιείται γύρω από το σημείο που ορίζεται
από την ιδιότητα transform-origin.
Σύνταξη
επιλογέας {
transform: rotate(γωνία);
}
Παράδειγμα
Σε αυτό το παράδειγμα, το μπλοκ έχει περιστραφεί κατά 30
μοίρες δεξιόστροφα:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Παράδειγμα
Σε αυτό το παράδειγμα, το μπλοκ έχει περιστραφεί κατά 30
μοίρες αριστερόστροφα:
<div id="elem">lorem ipsum</div>
#elem {
transform: rotate(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Παράδειγμα
Σε αυτό το παράδειγμα, το μπλοκ upon hover θα περιστραφεί
κατά 1 περιστροφή, καθώς η τιμή περιστροφής
ορίζεται σε 1turn (το ίδιο αποτέλεσμα μπορεί να επιτευχθεί,
αν οριστεί η γωνία περιστροφής σε 360deg). Για
ομαλότητα της περιστροφής προστέθηκε η ιδιότητα
transition:
<div id="elem">lorem ipsum</div>
#elem {
border: 3px solid black;
width: 100px;
height: 50px;
transition: transform 3s linear;
}
#elem:hover {
transform: rotate(1turn);
}
:
