Πρότυπο:Transform-rotate

Από τη Βικιπαίδεια, την ελεύθερη εγκυκλοπαίδεια
Μετάβαση σε: πλοήγηση, αναζήτηση


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

Ένα βοήθημα κώδικα 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 />στιχίζεται<br />κάθετα.</span><br /> <br /><span style="{{Transform-rotate|-180}}">Το κείμενο είναι ανεστραμμένο.</span>

  • Περιστροφή κειμένου:
    Το κείμενο
    στιχίζεται
    κάθετα.

     
    Το κείμενο είναι ανεστραμμένο.

Μια εικόνα που γράφει placeholder:

<div style="position:relative; top:150px; left:-60px; {{Transform-rotate|90|display=block}}">[[file:placeholder.png|200px]]</div>

Έχει περιστραφεί 90 μοίρες ωρολογιακώς.

Μια εικόνα που γράφει placeholder:
Placeholder.png

Έχει περιστραφεί 90 μοίρες ωρολογιακώς.

<div style="border:3px solid red; width:100px; position:relative; top:30px; opacity:0.5; {{Transform-rotate|-30|display=block}}"/>Αυτή είναι μια κόκκινη οριζόντια γραμμή που εκτείνεται επάνω στο κείμενο με περιστροφή γωνίας 30 μοιρών αριστερόστροφα.
Αυτή είναι μια κόκκινη οριζόντια γραμμή που εκτείνεται επάνω στο κείμενο με περιστροφή γωνίας 30 μοιρών αριστερόστροφα.

Δείτε επίσης[Επεξεργασία | επεξεργασία κώδικα]

{{MirrorH}}