Πρότυπο:Transform-rotate

Τεκμηρίωση προτύπου[προβολή] [επεξεργασία] [ιστορικό] [ανανέωση]

Ένα βοήθημα κώδικα CSS για την περιστροφή χαρακτήρων με εισαγωγή ιδιοτήτων μορφοποίησης. Χρησιμοποιήστε το εντός της ιδιότητας style="" της HTML, όπως και τις άλλες ιδιότητες CSS.

• Η πρώτη ανώνυμη παράμετρος {{{1}}} ορίζει την γωνία περιστροφής (σε μοίρες). Οι θετικές τιμές κάνουν περιστροφή δεξιόστροφα, ενώ οι αρνητικές κάνουν μια αντίστοιχη περιστροφή αριστερόστροφα.
• Η παράμετρος display= επιτρέπει την αλλαγή της ιδιότητας CSS display, που εξ ορισμού είναι display: inline-block;

Όταν οι συντάκτες χρησιμοποιούν αυτό το πρότυπο για να δημιουργήσουν περιστροφές, πρέπει να εξετάσουν προσεκτικά την προσβασιμότητα (διεθνή γλώσσα: accessibility).

Σημείωση: Αυτό το πρότυπο δεν υποστηρίζει IE8 ή παλαιότερα προγράμματα περιήγησης. Ο IE8 απαιτεί επίπονο υπολογισμό για τις μήτρες. Μπορεί κάποιος κάνει την εφαρμογή σε αυτό το πρότυπο, αν ξέρει πώς να μεταφράσει τον τύπο σε Lua.

Παραδείγματα

Η περιστροφή γίνεται από σημείο στο κέντρο του κάθε αντικειμένου και έχει επίδραση στις διαστάσεις του ώστε να διατηρήσει τις αρχικές τιμές των διαστάσεων του αντικειμένου που είχε πριν περιστραφεί, έτσι ώστε να μπορεί να το προσαρμόσει στη θέση του και να αποφύγει την όποια ανεπιθύμητη επικάλυψη. Χρησιμοποιήστε την παράμετρο display= για περαιτέρω έλεγχο της τοποθέτησής του.

Syntax	Result
*Μερικοί περιστραμμένοι χαρακτήρες:<br /><span style="{{Transform-rotate|90}}">Α</span> <span style="{{Transform-rotate|180}}">Β</span> <span style="{{Transform-rotate|270}}">Γ</span> <span style="{{Transform-rotate|360}}">Δ</span>	Μερικοί περιστραμμένοι χαρακτήρες: Α Β Γ Δ
*Μερικοί περιστραμμένοι αριθμοί:<br /><span style="{{Transform-rotate|0}}">0</span> <span style="{{Transform-rotate|10}}">1</span> <span style="{{Transform-rotate|20}}">2</span> <span style="{{Transform-rotate|30}}">3</span> <span style="{{Transform-rotate|40}}">4</span> <span style="{{Transform-rotate|50}}">5</span> <span style="{{Transform-rotate|60}}">6</span> <span style="{{Transform-rotate|70}}">7</span> <span style="{{Transform-rotate|80}}">8</span> <span style="{{Transform-rotate|90}}">9</span>	Μερικοί περιστραμμένοι αριθμοί: 0 1 2 3 4 5 6 7 8 9
*Περιστροφή κειμένου:<br /><span style="{{Transform-rotate|-90}}">Το κείμενο<br />στoιχίζεται<br />κάθετα.</span><br /> <br /><span style="{{Transform-rotate|-180}}">Το κείμενο είναι ανεστραμμένο.</span>	Περιστροφή κειμένου: Το κείμενο στoιχίζεται κάθετα.   Το κείμενο είναι ανεστραμμένο.
Μια εικόνα που γράφει placeholder: <div style="position:relative; top:150px; left:-60px; {{Transform-rotate|90|display=block}}">[[file:placeholder.png|200px]]</div> Έχει περιστραφεί 90 μοίρες ωρολογιακώς.	Μια εικόνα που γράφει 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}}