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