Plantilla:Transformar-rotar
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><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> |} |
|
Sintaxis | Resultado | ||||
---|---|---|---|---|---|
| |||||
{|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 |} |
|
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:
![](http://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/Wikidavinci.jpg/275px-Wikidavinci.jpg)
|
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).
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.