Ιδιότητα transform-origin
Η ιδιότητα transform-origin ορίζει το σημείο,
σε σχέση με το οποίο θα πραγματοποιούνται οι μετασχηματισμοί
του στοιχείου, που ορίζονται από την ιδιότητα transform.
Από προεπιλογή αυτό το σημείο είναι το κέντρο του στοιχείου,
και, για παράδειγμα, η περιστροφή θα γίνεται σε σχέση με
το κέντρο του. Ωστόσο, αυτή η συμπεριφορά μπορεί να αλλάξει
και να γίνει το στοιχείο να περιστρέφεται σε σχέση με
την πλευρά του, τη γωνία του ή ακόμα και σε σχέση με
σημείο που βρίσκεται έξω από το στοιχείο.
Σύνταξη
επιλογέας {
transform-origin: X-άξονας Y-άξονας Z-άξονας;
}
Οι τιμές στους άξονες Y και Z δεν είναι υποχρεωτικές, μπορούν να παραλειφθούν (θα λάβουν τις τιμές προεπιλογής). Η μετατόπιση του σημείου στον άξονα Z απαιτείται για τρισδιάστατους μετασχηματισμούς.
Τιμές για τον άξονα X
| Τιμή | Περιγραφή |
|---|---|
| Μονάδες CSS | Ως τιμή χρησιμοποιούνται οποιεσδήποτε μονάδες για μεγέθη, που ορίζουν την απόσταση του κέντρου μετασχηματισμού από το αριστερό όριο του στοιχείου. Η θετική τιμή μετατοπίζει το κέντρο μετασχηματισμού προς τα δεξιά (μέσα στο στοιχείο), ενώ η αρνητική - προς τα αριστερά (έξω από το στοιχείο) σε σχέση με το αριστερό όριο του στοιχείου. |
left |
Το σημείο περιστροφής οριζόντια στο αριστερό όριο του στοιχείου. |
right |
Το σημείο περιστροφής οριζόντια στο δεξί όριο του στοιχείου. |
center |
Το σημείο περιστροφής οριζόντια στο κέντρο του στοιχείου. |
Τιμή προεπιλογής: center.
Τιμές για τον άξονα Y
| Τιμή | Περιγραφή |
|---|---|
| Μονάδες CSS | Ως τιμή χρησιμοποιούνται οποιεσδήποτε μονάδες για μεγέθη, που ορίζουν την απόσταση του κέντρου μετασχηματισμού από το πάνω όριο του στοιχείου. Η θετική τιμή μετατοπίζει το κέντρο μετασχηματισμού προς τα κάτω (μέσα στο στοιχείο), ενώ η αρνητική - προς τα πάνω (έξω από το στοιχείο) σε σχέση με το πάνω όριο του στοιχείου. |
top |
Το σημείο περιστροφής κατακόρυφα στο πάνω όριο του στοιχείου. |
bottom |
Το σημείο περιστροφής κατακόρυφα στο κάτω όριο του στοιχείου. |
center |
Το σημείο περιστροφής κατακόρυφα στο κέντρο του στοιχείου. |
Τιμή προεπιλογής: center.
Τιμές για τον άξονα Z
| Τιμή | Περιγραφή |
|---|---|
| Μονάδες CSS | Ως τιμή χρησιμοποιούνται οποιεσδήποτε μονάδες για μεγέθη, που ορίζουν την απόσταση του κέντρου μετασχηματισμού από το επίπεδο του στοιχείου. Η θετική τιμή το μετατοπίζει προς εμάς (από το επίπεδο της οθόνης), ενώ η αρνητική μακριά από εμάς. |
Τιμή προεπιλογής: 0px.
Παράδειγμα
Τώρα η τιμή της ιδιότητας transform-origin δεν έχει οριστεί και το μπλοκ θα περιστραφεί σε σχέση με το κέντρο του. Τοποθετήστε το ποντίκι πάνω στο μπλοκ για να δείτε το εφέ:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: center center;
transform: rotate(30deg);
}
:
Παράδειγμα
Και τώρα κατά την τοποθέτηση του ποντικιού το μπλοκ θα περιστραφεί σε σχέση με την πάνω αριστερή γωνία:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 0px 0px;
transform: rotate(30deg);
}
:
Παράδειγμα
Και τώρα κατά την τοποθέτηση του ποντικιού το μπλοκ θα περιστραφεί σε σχέση με
την κάτω δεξιά γωνία. Για αυτό πρέπει να τοποθετήσουμε
το σημείο μετασχηματισμού 100% προς τα δεξιά
και 100% προς τα κάτω (θα μπορούσαμε να ορίσουμε
και px, αλλά κατά την αλλαγή των διαστάσεων του στοιχείου
το σημείο μετασχηματισμού θα έμενε στη θέση του,
επομένως είναι καλύτερα να το ορίζουμε σε %):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 100%;
transform: rotate(30deg);
}
:
Παράδειγμα
Θα περιστρέψουμε το μπλοκ σε σχέση με την πάνω δεξιά γωνία:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 0%;
transform: rotate(30deg);
}
:
Παράδειγμα
Θα περιστρέψουμε το μπλοκ σε σχέση με το κέντρο της αριστερής πλευράς.
Για αυτό για τον άξονα X θα ορίσουμε left (το σημείο
περιστροφής θα είναι αριστερά), και για τον άξονα Y - center
(το σημείο περιστροφής θα είναι στο κέντρο κατακόρυφα):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left center;
transform: rotate(30deg);
}
:
Παράδειγμα
Η ιδιότητα μπορεί να οριστεί όχι μόνο για περιστροφή,
αλλά και για άλλους μετασχηματισμούς. Ας αυξήσουμε
την κλίμακα με τη βοήθεια του scale, ορίζοντας το σημείο
μετασχηματισμού ως την κάτω αριστερή γωνία:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left bottom;
transform: scale(1.5);
}
:
Παράδειγμα
Και τώρα θα ορίσουμε ως σημείο μετασχηματισμού την πάνω δεξιά γωνία:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: right top;
transform: scale(1.5);
}
:
Παράδειγμα
Το σημείο μετασχηματισμού μπορεί να οριστεί και έξω από το στοιχείο. Στο επόμενο παράδειγμα κατά την τοποθέτηση του ποντικιού πάνω στο κόκκινο μπλοκ, το μαύρο μπλοκ θα πραγματοποιήσει περιστροφή σε σχέση με σημείο, που βρίσκεται εξωτερικά:
<div id="hover"></div>
<div id="elem"></div>
#hover {
border: 1px solid red;
width: 50px;
height: 50px;
}
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
transition: transform 1s;
transform-origin: -100px -100px;
}
#hover:hover + #elem {
transform: rotate(30deg);
}
:
