Cómo rotar continuamente una imagen usando CSS

 

 

 

Como rotar continuamente una imagen usando css 1

Cómo utilizar animaciones CSS para rotar una imagen continuamente

Mientras creaba la página de inicio del Manual de React, tuve que buscar cómo rotar una imagen. Quería rotar una imagen SVG, pero esto funciona para cualquier tipo de imagen. O cualquier elemento HTML, en realidad.

Agrega esta instrucción CSS al elemento que quieres rotar:

animation: rotation 2s infinite linear;

También puedes optar por agregar una rotateclase a un elemento, en lugar de apuntarle directamente:

 

.rotate { animation: rotation 2s infinite linear;}

Ajustar 2spara ralentizar o acelerar el período de rotación.

Luego agrega esta línea, fuera de cualquier selector:

@keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(359deg); }}

¡Eso es todo! Tus elementos ahora deben rotar.

Consulta las guías de animaciones CSS y transiciones CSS.

Aquí está el resultado mostrado en Codepen:

Tips de CSS




Tal vez te puede interesar:

  1. Manejo de errores CSS
  2. Importar un archivo CSS usando @import
  3. Bordes CSS
  4. La propiedad flotante CSS y su limpieza

Cómo rotar continuamente una imagen usando CSS

Mientras creaba la página de inicio del Manual de React, tuve que buscar cómo rotar una imagen. Quería rotar una imagen SVG, pero esto funciona para cualqui

programar

es

https://aprendeprogramando.es/static/images/programar-como-rotar-continuamente-una-imagen-usando-css-1891-0.jpg

2024-10-29

 

Como rotar continuamente una imagen usando css 1
Como rotar continuamente una imagen usando css 1

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences