Plantilla:Transformar-rotar
[editar] []
Documentación de la plantilla
Uso
{{Transformar-rotar}} es un código CSS que permite GIRAR la presentación de un elemento gráfico cualquiera, como un texto o una imagen.
Se utiliza en el interior del comando HTML style="", como otras propiedades CSS.
Habitualmente toma la forma:
<span style="{{Transform-rotate|ángulo|display=posición}}">TEXTO O IMAGEN A GIRAR</span>aunque también puede usarse la forma:
<div style="{{Transform-rotate|ángulo|display=posición}}">TEXTO O IMAGEN A GIRAR</div>A efectos prácticos, la diferencia entre utilizar <span> o <div> es muy pequeña. En principio, "<span>" se usa para intercalar elementos de texto rotados en una línea de texto, mientras que "<div>" es más adecuado para rotar imágenes.
Parámetros
<span style="{{Transformar-rotar
|1 = El primer parámetro se utiliza para especificar el ángulo de rotación (en grados sexagesimales).
Los valores positivos giran a la derecha,
los valores negativos giran a la izquierda.
|display = Este parámetro permite cambiar la propiedad CSS ''display'' relacionada con la posición
del elemento girado. Puede tomar el valor "block". Por defecto se toma "inline-block"
}}">
TEXTO O IMAGEN QUE SE DESEA GIRAR
</span>
Al utilizar esta plantilla para crear un efecto de rotación, los editores deben considerar cuidadosamente las consideraciones efectuadas en accessibilidad.
Nota: Esta plantilla no es compatible con Internet Explorer 8 o con versiones anteriores. IE8 requiere un cálculo engorroso de matrices.
Parámetros auxiliares
Cuando se rotan imágenes, como en el ejemplo siguiente, se utiliza el comando div style=, que tiene sus propios parámetros:
<div style="position:relative; top:0px; left:0px; {{Transformar-rotar|90|display=block}}">[[file:Flag of Australia.svg|120px]]</div>
Con los parámetros top:Npx; left:Npx;, se puede desplazar la imagen Npx,, desde arriba y Mpx,, desde la izquierda.
Ejemplos
La rotación se realiza sobre el centro del objeto. Sus dimensiones efectivas retienen los valores originales del objeto como si estuviese sin rotar, por lo que en ocasiones se debe ajustar la posición del elemento para evitar superposiciones no deseadas. Utilizar el parámetro display= para obtener un mayor control de la posición.
| Sintaxis | Resultado |
|---|---|
| |
<span style="{{Transformar-rotar|90}}">A</span> <span style="{{Transformar-rotar|180}}">B</span> <span style="{{Transformar-rotar|270}}">C</span> <span style="{{Transformar-rotar|360}}">D</span>
|
A B C D |
| |
<span style="font-size: 1.4em; {{Transformar-rotar|0}}">?</span> <span style="font-size: 1.4em; {{Transformar-rotar|20}}">?</span> <span style="font-size: 1.4em; {{Transformar-rotar|40}}">?</span> <span style="font-size: 1.4em; {{Transformar-rotar|60}}">?</span>
|
? ? ? ? |
| |
<span style="{{Transformar-rotar|0}}">0</span> <span style="{{Transformar-rotar|10}}">1</span> <span style="{{Transformar-rotar|20}}">2</span> <span style="{{Transformar-rotar|30}}">3</span> <span style="{{Transformar-rotar|40}}">4</span> <span style="{{Transformar-rotar|50}}">5</span> <span style="{{Transformar-rotar|60}}">6</span> <span style="{{Transformar-rotar|70}}">7</span> <span style="{{Transformar-rotar|80}}">8</span> <span style="{{Transformar-rotar|90}}">9</span>
|
0 1 2 3 4 5 6 7 8 9 |
| |
<span style="{{Transformar-rotar|-90}}">This text<br />is vertically<br />aligned.</span><br /> <br /><span style="{{Transformar-rotar|-180}}">This text is upside down.</span>
|
This text is vertically aligned. This text is upside down. |
| |
<div style="position:relative; top:0px; left:0px; {{Transformar-rotar|90|display=block}}">[[file:Flag of Australia.svg|120px]]</div>
Nota: para que la celda se ajuste en altura al tamaño de la bandera, hay que ponerle por delante: |style="vertical-align:bottom;height:150px;"| |
 |
| |
<div style="border:3px solid red; width:150px; position:relative; top:50px; opacity:0.5; {{Transformar-rotar|-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. |
| Sintaxis | Resultado | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||
{|class="wikitable"
|-
|style="vertical-align:center;height:150px;"|<div style="position:relative; top:0px; left:0px; {{Transformar-rotar|0|display=block}}">[[file:Flag of Australia.svg|120px]]
|style="vertical-align:center;height:150px;"|<div style="position:relative; top:0px; left:0px; {{Transformar-rotar|45|display=block}}">[[file:Flag of Australia.svg|120px]]</div></div>
|style="vertical-align:center;height:150px;"|<div style="position:relative; top:0px; left:0px; {{Transformar-rotar|90|display=block}}">[[file:Flag of Australia.svg|120px]]</div>{{bc|
|style="vertical-align:center;height:150px;"|<div style="position:relative; top:0px; left:0px; {{Transformar-rotar|135|display=block}}">[[file:Flag of Australia.svg|120px]]</div>
|- style="height:250px;"
|{{bc|1=<big>'''GIRO=0°'''</big>}}
|{{bc|1=<big>'''GIRO=45°'''</big>}}
|{{bc|1=<big>'''GIRO=90°'''</big>}}
|{{bc|1=<big>'''GIRO=135°'''</big>}}
|-
|style="vertical-align:center;height:150px;"|<div style="position:relative; top:0px; left:0px; {{Transformar-rotar|315|display=block}}">[[file:Flag of Australia.svg|120px]]</div>
|style="vertical-align:center;height:150px;"|<div style="position:relative; top:0px; left:0px; {{Transformar-rotar|270|display=block}}">[[file:Flag of Australia.svg|120px]]</div>
|style="vertical-align:center;height:150px;"|<div style="position:relative; top:0px; left:0px; {{Transformar-rotar|225|display=block}}">[[file:Flag of Australia.svg|120px]]</div>
|style="vertical-align:center;height:150px;"|<div style="position:relative; top:0px; left:0px; {{Transformar-rotar|180|display=block}}">[[file:Flag of Australia.svg|120px]]</div>
|- style="height:250px;"
|{{bc|1=<big>'''GIRO=315°'''</big>}}
|{{bc|1=<big>'''GIRO=270°'''</big>}}
|{{bc|1=<big>'''GIRO=225°'''</big>}}
|{{bc|1=<big>'''GIRO=180°'''</big>}}
|-
|}
|
| ||||||||||||||||
| Sintaxis | Resultado | ||||
|---|---|---|---|---|---|
| |||||
{|class="wikitable"
|- style="vertical-align:center;height:250px;"
|style="width:300px;"|{{bc|1=
<div style="position:relative; top:0px; left:0px; {{Transformar-rotar|90|display=block}}">[[file:Flag of Australia.svg|200px]]</div>
}}
|style="width:300px;"|{{bc|1=
<div style="position:relative; top:0px; left:0px; {{Transformar-rotar|-45|display=block}}">[[file:Flag of Australia.svg|200px]]</div>
}}
|-style="text-align:center;"
|Bandera rotada 90° en sentido horario
|Bandera rotada 45° en sentido antihorario
|-
|}
|
| ||||
Véase también:
- {{Espejo}}
- {{transformar}}
Esta documentación está transcluida desde Plantilla:Transformar-rotar/doc.
Los editores pueden experimentar en la zona de pruebas de esta plantilla.
Por favor, añade las categorías e interwikis a la subpágina de documentación. Subpáginas de esta plantilla.
Los editores pueden experimentar en la zona de pruebas de esta plantilla.
Por favor, añade las categorías e interwikis a la subpágina de documentación. Subpáginas de esta plantilla.