Las animaciones de Primer CSS generalmente se usan para llamar la atención del usuario hacia el elemento de animación y para una mejor experiencia de usuario.
En este artículo, veremos Primer CSS Rotation Animation. Para aplicar la animación de rotación a un elemento, debemos agregar la clase anim-rotate al elemento. Un elemento con animación de rotación rotará infinitamente alrededor de sus coordenadas de origen de transformación, que es el centro del elemento en la mayoría de los casos.
Primer clases de animación de rotación CSS:
- anim-rotate: esta clase se usa para aplicar animación de rotación a un elemento.
Sintaxis:
<element class="anim-rotate">
Content...
</element>
Ejemplo 1: Este ejemplo muestra el uso de la clase anim-rotate para rotar un simple botón CSS de Primer.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Rotation Animation - Primer CSS</title> <link href= "https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <div class="text-center"> <h2>GeeksforGeeks</h2> <h4>Primer CSS - Rotation Animation</h4> </div> <div class="d-flex flex-justify-center mt-10"> <button type="button" class= "anim-rotate btn-mktg btn-signup-mktg"> Rotating Button </button> </div> </body> </html>
Producción:
Ejemplo 2: Este ejemplo muestra la rotación de una imagen al agregarle la clase anim-rotate .
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Rotation Animation - Primer CSS</title> <link href= "https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <div class="text-center"> <h2 style="color:green;"> GeeksforGeeks </h2> <h4>Primer CSS - Image Rotation Animation</h4> </div> <div class="d-flex flex-justify-center mt-6"> <img class="anim-rotate" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220408213837/gfg200x200min.png" /> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/utilities/animations#rotation
Publicación traducida automáticamente
Artículo escrito por prakhara306 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA