Cómo hacer algo Vertical Horizontal en HTML

La propiedad de "transformar" en CSS nivel 3 (CSS3) hace que sea posible girar cualquier parte de una página web por un determinado número de grados. Esto es útil si usted quiere tomar un elemento vertical en su página web y que sea horizontal. Todo el contenido del elemento girarán, incluyendo cualquier texto contenido. Todos los navegadores modernos soportes "transformar", e Internet Explorer 8 y por debajo del soporte giratorio con un filtro. Por esta razón, los elementos de rotación está bien soportado en todos los navegadores, por lo que se puede utilizar sin ningún tipo de secuencias de comandos necesarios.

Instrucciones

1 Abrir el código fuente de la página Web en un editor de código. Un editor de texto, como Bloc de notas, también funcionará, pero no utilizar un procesador de textos. Encontrar el elemento que desea hacer horizontal en el código:

<Div id = "tall_box">
Contenido
</ Div>

Para este ejemplo, imaginemos que el div es una caja de altura que desea girar hacia un lado. La anchura y la altura de la caja ya están definidas, pero que todavía tiene que conseguir la vuelta 90 grados.

2 Abra la hoja de estilos en un editor o encontrar los "<style>" etiquetas en su página Web. Se puede añadir código CSS para la parte inferior del archivo de hoja de estilo CSS o entre un par de "<style>" etiquetas en la cabeza del código de la página Web:

<Style type = "text / css">
</ Style>

3 Escribir una nueva regla de estilo para el elemento, la orientación por su nombre ID:

tall_box {

}

Si ya existe una regla de estilo para este objeto, las propiedades que establezca dentro de esta regla, ya sea añaden a ella o prioridad sobre los valores de propiedad anteriores. Por esta razón, se debe añadir la nueva regla de estilo después de todo otro tipo de código CSS en la hoja de estilos o dentro de los "<style>" etiquetas.

4 Utilice la propiedad "transformar" para girar el elemento 90 grados. La rotación va hacia la derecha, por lo que si desea activar el elemento 90 grados en el sentido contrario a las agujas del reloj, lo cambian a -90 grados "":

tall_box {

transform: rotar (90 grados);
}

5 Duplicar los "transformar" a la propiedad cuatro veces, una para cada tipo de navegador es necesario apuntar. Cada navegador tiene un prefijo diferente, debe utilizar para hacer "transformar" el trabajo, a excepción de Chrome y Safari. Webkit cubre tanto Chrome y Safari:

tall_box {

transform: rotar (90 grados);
-moz-transform: rotar (90 grados);
-webkit-transform: rotate (90 grados);
-o-transform: rotate (90 grados);
-ms-transform: gira (90 grados);
}

Dado que todos los navegadores finalmente adoptar la propiedad de "transformar" sin prefijos, deje la línea original de código en la regla de estilo.

6 Añadir un filtro para las versiones de Internet Explorer 8 y siguientes. Este filtro no siempre rinden tan bien como el código normal "transformar", pero girará cualquier elemento:

Filtro: progid: DXImageTransform.Microsoft.BasicImage (rotación = 3);

Consejos y advertencias

• Puede que tenga que cambiar la posición de un elemento para evitar que se va fuera de la página después de haber sido girado. Usted puede hacer esto con "position: relative" y luego ajuste "arriba" o "izquierda" con el número de píxeles que desee mover el elemento de la parte superior oa la izquierda de su posición actual.