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

245

Tengo una <div>que quiero rotar 90 grados:

<div id="container_2"></div>

¿Cómo puedo hacer esto?

html css

— usuario1808433
fuente

66

Qué puede hacer Google por usted :): stackoverflow.com/questions/2449668/…

— Benz

Un ejemplo: w3schools.com/cssref/css3_pr_transform.asp

— specialscope

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

#container_2 {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

<div id="container_2"></div>

Expandir fragmento

(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

4

puede usar la propiedad css3 modo de escritura modo de escritura: tb-rl

trucos css

mozilla

— Ashraf
fuente

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