Plantilla:Transformar-rotar

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
Algunos caracteres rotados:
<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
Algunos caracteres especiales rotados (se puede usar cuando la fuente no disponga del tipo de letra itálica o cursiva):
<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>	? ? ? ?
Trabajando con números también:
<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
O con un texto cualquiera:
<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.
Esta es una imagen de una bandera australiana, girada 90 grados en sentido horario:
<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;"\|
Esta es una línea roja horizontal trazada a través del texto en el ángulo de 30 grados en sentido antihorario:
<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

Bandera australiana rotada en intervalos de 45° en sentido horario:

{|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><center>
|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;"
|<center><big>'''GIRO=0°'''</big><center>
|<center><big>'''GIRO=45°'''</big><center>
|<center><big>'''GIRO=90°'''</big><center>
|<center><big>'''GIRO=135°'''</big><center>
|-
|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;"
|<center><big>'''GIRO=315°'''</big><center>
|<center><big>'''GIRO=270°'''</big><center>
|<center><big>'''GIRO=225°'''</big><center>
|<center><big>'''GIRO=180°'''</big><center>
|}


GIRO=0°	GIRO=45°	GIRO=90°	GIRO=135°

GIRO=315°	GIRO=270°	GIRO=225°	GIRO=180°

Sintaxis

Resultado

Girar una bandera australiana 90° en sentido horario, o 45° en sentido antihorario:

{|class="wikitable"
|- style="vertical-align:center;height:250px;"
|style="width:300px;"|<center>
<div style="position:relative; top:0px; left:0px; {{Transformar-rotar|90|display=block}}">[[file:Flag of Australia.svg|200px]]</div>
</center>
|style="width:300px;"|<center>
<div style="position:relative; top:0px; left:0px; {{Transformar-rotar|-45|display=block}}">[[file:Flag of Australia.svg|200px]]</div>
</center>
|-style="text-align:center;"
|Bandera rotada 90° en sentido horario
|Bandera rotada 45° en sentido antihorario
|}


Bandera rotada 90° en sentido horario	Bandera rotada 45° en sentido antihorario

Recortar y rotar una imagen

Para recortar y girar una imagen, se debe recortar primero (de acuerdo con el caso general ya descrito), y después rotarla, completando algunos comandos manualmente:


IMAGEN RECORTADA Y ROTADA:

El código necesario se muestra a continuación:

[[Archivo:Wikidavinci.jpg|miniatura|275px|izquierda|'''IMAGEN ORIGINAL:''']]
{|class="wikitable"
||
<div class="thumbinner">
<div style="position:relative; width:650px; height:300px; top:-175px; left:-175px; {{Transformar-rotar|-90|display=block}}">
{{Recortar Imagen
|Imagen = Wikidavinci.jpg
|bSize = 1200
|cWidth = 300
|cHeight = 650
|oTop = 0
|oLeft = 420
}}
</div></div>
|-
||<small>'''IMAGEN RECORTADA Y ROTADA:'''</small>
|}

Como se muestra en el ejemplo, una vez establecidos el ancho y el alto de la imagen recortada, a continuación se procede a girarla, declarando su anchura y altura en el comando div style= (si se gira 90°, el nuevo ancho coincidirá con el antiguo alto, y viceversa). Se debe tener en cuenta que top: y left: son iguales, negativos, y se obtienen de restar el ancho y el alto de la imagen, y dividirlo por dos (en el ejemplo, top = left = [height - width] / 2 = [300 - 650] / 2 = -350 / 2 = -175px).

Esta documentación está transcluida desde Plantilla:Transformar-rotar/doc.
Los editores pueden experimentar en la zona de pruebas (crear) y en los casos de prueba (crear) de la plantilla.
Por favor, añade las categorías en la subpágina de documentación. Subpáginas de esta plantilla.