El siguiente es mi código, configuré el centro de la línea como rotar pivote transform-origin 50px 50px , pero la línea no gira con su centro
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!-- disable request favicon--> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <!--mobile friendly--> <meta name="viewport" content="width=device-width, user-scalable=yes"> </head> <body> <style> .c { transform: translate(200px, 200px); } .it { animation: spin 2s linear infinite; } @keyframes spin { /*50% {*/ /* transform: rotate(180deg);*/ /*}*/ 50% { transform-origin: 50px 50px; transform: rotate(360deg); } } </style> <svg class="c" width="100" height="100"> <!-- <line x1="50" y1="50" x2="50" y2="100" stroke="black"/>--> <path d="M 0 50 L 100 50" stroke="black" class="it"> </path> </svg> <script type="module"> </script> </body> </html>Encuentro la razón, la razón es que puse transform-origin en el fotograma clave, su frame 0 transform-origin es predeterminado, pero en el frame transform-origin es 50px 50px, provoca la transformación del elemento, por lo que la solución se establece transform-origin en la clase del elemento no fotograma clave; siguiente es el código correcto
<style> .c { transform: translate(200px, 200px); } .it { animation: rotate 2s linear infinite; transform-origin: 50px 50px; } @keyframes rotate { 100% { transform: rotate(360deg); } } </style> <svg class="c" width="100" height="100"> <path d="M 0 50 L 100 50" stroke="black" class="it"></path> </svgCreo que quieres decir que quieres que gire alrededor del centro. Tal vez reconsidere el enfoque: haga un div con una línea en el centro y luego simplemente gire el div y establezca el desbordamiento en oculto. Incluso podría usar una imagen con una línea en el centro superior y hacer que esa imagen gire. Mira este código.
HTML:
<div class="div1"> <div class="div2"> <div class="div3"> </div> <div class="div4"> </div> <div class="div3"> </div> </div> <div class="div2"> </div> </div>CSS:
.div1 { height: 400px; width: 400px; background-color: red; animation-name: spin; animation-duration: 3000ms; animation-iteration-count: infinite; animation-timing-function: linear; overflow-x: hidden; overflow-y: hidden; } .div2 { height: 50%; width: 100%; background-color: white; display: flex; } .div3 { height: 100%; width: 49.5%; background-color: white; } .div4 { height: 100%; width: 1%; background-color: black; } @keyframes spin { from {transform:rotate(0deg);} to {transform:rotate(360deg);} }Codepen para verlo en acción: https://codepen.io/adamdolson/pen/vYREQMY