¿Cómo puedo rotar un HTML <div> 90 grados?

Respuestas:

465

Necesita CSS para lograr esto, por ejemplo:

#container_2 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

Manifestación:

Mostrar fragmento de código

(Hay una rotación de 45 grados en la demostración, para que pueda ver el efecto)

Nota: Los prefijos -o-y -moz-ya no son relevantes y probablemente no sean necesarios . IE9 requiere -ms-y Safari y el navegador de Android requieren-webkit-

Actualización 2018: los prefijos de proveedor ya no son necesarios. Solo transformes suficiente. (gracias @ rinogo)

Dziad Borowy
fuente
no está cambiando, estoy usando esto en un archivo CSS
user1808433
99
@ user1808433 porque con una rotación de 90 grados el cuadrado se vería igual :-), aquí hay una demostración: jsbin.com/opamiq/1
Dziad Borowy
77
también, asegúrese de que sea un bloque
chovy
3
Actualización 2018: solo transform: rotate(90deg);es necesario
rinogo
28

Use el siguiente en su CSS 

div {
    -webkit-transform: rotate(90deg); /* Safari and Chrome */
    -moz-transform: rotate(90deg);   /* Firefox */
    -ms-transform: rotate(90deg);   /* IE 9 */
    -o-transform: rotate(90deg);   /* Opera */
    transform: rotate(90deg);
}
عثمان غني
fuente
37
Solo como una sugerencia para todos los futuros lectores: siempre coloque las reglas prefijadas antes de la definición de estándares. En este caso, todas las reglas prefijadas del navegador deben estar antes de la transform: rotate(90deg);regla. La razón sería que, por lo general, desea que los estándares tengan prioridad, y en CSS la última definición siempre gana.
Jesse
14

Uso transform: rotate(90deg):

#container_2 {
    border: 1px solid;
    padding: .5em;
    width: 5em;
    height: 5em;
    transition: .3s all;  /* rotate gradually instead of instantly */
}

#container_2:hover {
    -webkit-transform: rotate(90deg);  /* to support Safari and Android browser */
    -ms-transform: rotate(90deg);      /* to support IE 9 */
    transform: rotate(90deg);
}
<div id="container_2">This box should be rotated 90&deg; on hover.</div>
Expandir fragmento

Haga clic en "Ejecutar fragmento de código", luego desplace el cursor sobre el cuadro para ver el efecto de la transformación.

Siendo realistas, no se necesitan otras entradas prefijadas. Consulte ¿Puedo usar transformaciones CSS3?

Zaz
fuente
1
Esto sería mejor como un comentario en una respuesta existente ... o haga una edición de una respuesta existente que indique que los otros prefijos probablemente no sean necesarios. Tener 3 más o menos exactamente las mismas respuestas es inútil.
misterManSam
@Zaz, ¿cómo mantener la caja rotada incluso después de destrabar?
heyayush
@ayushsharma: use JS o vea Hacer que el estado de desplazamiento de CSS permanezca después de “desanclar” : un truco sugirió que existe #element{transition: 9999999s}(lo que hace que la transición de regreso a la normalidad tome una eternidad) y #element:hover{transition: .3s}(o el tiempo que desee que tome la rotación).
Zaz
0

Podemos agregar lo siguiente a una etiqueta particular en CSS:

-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);

En caso de media rotación cambiar 90a 45.

subindas pm
fuente