Plantilla:Transform-rotate

Documentació de la plantilla [ mostra ] [ modifica el codi ] [ mostra l'historial ] [ refresca ]

A shorthanded CSS code for rotating elements inside style attribute. Use it inside the style="" attribute of HTML elements like other CSS properties.

• First unnamed parameter {{{1}}} for rotation angle (in degree). Positive values rotate right, negative values rotate left.
• The named parameter |display= allows you to change the CSS display property. It defaults to display: inline-block;

When using this template to create the rotating effect, editors should consider carefully about the accessibility.

Nota: This template does not support IE8 or older. IE8 requires cumbersome calculating of matrices. You may implement it into this template if you know how to translate the formula into Lua.

Exemples

La rotació es produeix al centre de l'objecte i les seves dimensions efectives conservaran els valors originals de l'objecte com si no estiguessin rotats, de manera que podeu ajustar la posició i el farciment per evitar la superposició no desitjada. Utilitzeu el paràmetre display= per controlar encara més el posicionament.

Sintaxi	Resultat
Girant alguns caràcters:
<span style="{{Transform-rotate|90}}">5</span> <span style="{{Transform-rotate|180}}">5</span> <span style="{{Transform-rotate|270}}">5</span> <span style="{{Transform-rotate|360}}">5</span>	5 5 5 5
Rotació d'alguns caràcters especials (útil quan la família del tipus de lletra no té un tipus de lletra cursiva ni oblicua):
<span style="font-size: 1.4em; {{Transform-rotate|0}}">∫</span> <span style="font-size: 1.4em; {{Transform-rotate|20}}">∫</span> <span style="font-size: 1.4em; {{Transform-rotate|40}}">∫</span> <span style="font-size: 1.4em; {{Transform-rotate|60}}">∫</span>	∫ ∫ ∫ ∫
També funciona amb números
<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
O amb text arbitrari
<span style="{{Transform-rotate|-90}}">This text<br />is vertically<br />aligned.</span><br />&nbsp;<br /><span style="{{Transform-rotate|-180}}">This text is upside down.</span>	This text is vertically aligned.   This text is upside down.
Es tracta d’una imatge que es gira 90 graus en sentit horari.'
<div style="position:relative; top:0px; left:0px; {{Transform-rotate|90|display=block}}">[[Fitxer:Image PlaceHolder.png|200px]]</div>
Es tracta d'una línia horitzontal vermella dibuixada a través del text amb un angle de 30 graus en sentit antihorari.
<div style="border:3px solid red; width:150px; position:relative; top:50px; opacity:0.5; {{Transform-rotate|-30|display=block}}"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Limitació greu:

Sintaxi	Resultat
<span style="{{Transform-rotate|90}}">The text will be rotated, but not the space the text need to display. So the cell is not tall enough, but much much too wide.</span>	The text will be rotated, but not the space the text need to display. So the cell is not tall enough, but much much too wide.

Vegeu també:

• {{MirrorH}}
• {{transform}}