¿Alguien puede decirme por qué mi elemento div se mueve cuando solo quiero que gire? Como puede ver, es como si estuviera girando alrededor de otra cosa. He intentado arreglarlo con transform-origin y transform-box pero no funciona...
Aquí está el código:
#demo3 { font-size: 2em; font-family: Helvetica, Arial, sans-serif; color: black; width: 200px; height: 200px; position: absolute; top: 50%; left: 50%; animation: rotation 15s infinite linear; transform-origin: center; transform-box: fill-box; } @keyframes rotation { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } } <!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" /> <link rel="stylesheet" href="style.css" /> <title>Document</title> </head> <body> <div id="demo3">We are Simplifix. We make design simple.</div> <script src="https://cdn.jsdelivr.net/npm/circletype@2.3.0/dist/circletype.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> new CircleType(document.getElementById("demo3")); </script> </body> </html>