Puede rotar fácilmente imágenes en HTML utilizando la propiedad de transformación CSS. Esta propiedad se utiliza para mover, rotar, escalar y realizar varios tipos de transformaciones de elementos.
Enfoque: puede usar la función de rotate() definida como una transformación que gira un elemento alrededor de un punto fijo en el plano 2D, sin deformarlo. Toma un parámetro que define el ángulo de rotación. El ángulo de rotación consta de dos partes, el valor de la rotación seguido de la unidad de rotación. La unidad se puede definir en grados (deg), gradiente (grad), radianes (rad) y vueltas. El valor con el método de rotate() rotará un elemento en el sentido de las agujas del reloj.
Nota: Para rotar 90 grados se puede utilizar cualquiera de las unidades con sus valores correspondientes. 90 grados equivaldrían a 100 gradientes o 0,25 vueltas.
Sintaxis:
transform: rotate(90deg);
Se recomienda agregar el siguiente código en CSS para que su código sea compatible con todos los principales navegadores porque las personas que usan otros navegadores lo verán al revés.
Código CSS:
-webkit-transform:rotate(180deg); /* Chrome, Safari, Opera */ -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); /* Standard syntax */
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.rotate_image {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<center>
<img class="rotate_image"
src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt="GeeksforGeeks logo">
</center>
</body>
</html>
Producción:
- Sin usar transform: propiedad de rotate():
- Usando transform: propiedad de rotate():
Publicación traducida automáticamente
Artículo escrito por aksrathod07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA