example - ¿Cómo puedo rotar un HTML<div> 90 grados?
rotate image html (5)
Tengo un <div> que quiero girar 90 grados:
<div id="container_2"></div>
¿Cómo puedo hacer esto?
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:
#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>
(Hay 45 grados de rotación en la demostración, así que puedes 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 proveedores ya no son necesarios. Sólo la transform es suficiente. (gracias @rinogo)
Podemos agregar lo siguiente a una etiqueta en 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 de 90 a 45 .
Usa lo siguiente en tu 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);
}
Utilice 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° on hover.</div>
Haga clic en "Ejecutar fragmento de código", luego desplace el cursor sobre el cuadro para ver el efecto de la transformación.
De manera realista, no se necesitan otras entradas con prefijo. Ver ¿Puedo usar CSS3 Transforms?