Πρότυπο:Transform-rotate
![](http://upload.wikimedia.org/wikipedia/commons/thumb/4/43/Test_Template_Info-Icon_-_Version_%282%29.svg/50px-Test_Template_Info-Icon_-_Version_%282%29.svg.png)
Ένα βοήθημα κώδικα CSS για την περιστροφή χαρακτήρων με εισαγωγή ιδιοτήτων μορφοποίησης. Χρησιμοποιήστε το εντός της ιδιότητας style=""
της HTML, όπως και τις άλλες ιδιότητες CSS.
- Η πρώτη ανώνυμη παράμετρος
{{{1}}}
ορίζει την γωνία περιστροφής (σε μοίρες). Οι θετικές τιμές κάνουν περιστροφή δεξιόστροφα, ενώ οι αρνητικές κάνουν μια αντίστοιχη περιστροφή αριστερόστροφα. - Η παράμετρος
display=
επιτρέπει την αλλαγή της ιδιότητας CSS display, που εξ ορισμού είναιdisplay: inline-block;
Όταν οι συντάκτες χρησιμοποιούν αυτό το πρότυπο για να δημιουργήσουν περιστροφές, πρέπει να εξετάσουν προσεκτικά την προσβασιμότητα (διεθνή γλώσσα: accessibility).
Σημείωση: Αυτό το πρότυπο δεν υποστηρίζει IE8 ή παλαιότερα προγράμματα περιήγησης. Ο IE8 απαιτεί επίπονο υπολογισμό για τις μήτρες. Μπορεί κάποιος κάνει την εφαρμογή σε αυτό το πρότυπο, αν ξέρει πώς να μεταφράσει τον τύπο σε Lua.
Παραδείγματα
[επεξεργασία κώδικα]Η περιστροφή γίνεται από σημείο στο κέντρο του κάθε αντικειμένου και έχει επίδραση στις διαστάσεις του ώστε να διατηρήσει τις αρχικές τιμές των διαστάσεων του αντικειμένου που είχε πριν περιστραφεί, έτσι ώστε να μπορεί να το προσαρμόσει στη θέση του και να αποφύγει την όποια ανεπιθύμητη επικάλυψη. Χρησιμοποιήστε την παράμετρο display=
για περαιτέρω έλεγχο της τοποθέτησής του.
Syntax | Result |
---|---|
|
|
|
|
|
|
|
Μια εικόνα που γράφει placeholder:
Έχει περιστραφεί 90 μοίρες ωρολογιακώς. |
<div style="border:3px solid red; width:100px; position:relative; top:30px; opacity:0.5; {{Transform-rotate|-30|display=block}}"></div>Αυτή είναι μια κόκκινη οριζόντια γραμμή που εκτείνεται επάνω στο κείμενο με περιστροφή γωνίας 30 μοιρών αριστερόστροφα.
|
Αυτή είναι μια κόκκινη οριζόντια γραμμή που εκτείνεται επάνω στο κείμενο με περιστροφή γωνίας 30 μοιρών αριστερόστροφα. |
Δείτε επίσης
[επεξεργασία κώδικα]{{MirrorH}}