0
259
ViewsEl texto se traduce hacia abajo cuando se gira
Estoy creando un botón de reinicio para una simulación como parte de una aplicación web. cuando hace clic en el botón, gira el icono de reinicio. Para hacer esto, estoy usando transformar rotar para hacer girar un elemento de texto, pero cuando lo hago girar, termina más bajo que cuando comenzó. No tengo idea de por qué sucede esto, pero buscar en Google la respuesta no me ha llevado a ninguna parte. cualquier ayuda es apreciada thx.
fotogramas clave:
@keyframes spin360 { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } }Llamo a los fotogramas clave en javascript usando esta función:
function spin() { document.getElementById("resetButtonSvg").style.animation = "spin360 0.5s ease forwards"; }* tenga en cuenta que se llama resetButtonSvg porque estaba planeando usar un SVG, pero terminé usando Unicode.
·
Juan Pablo Isaza
1 answers
Answer question0
solo cambia tu html a algo como esto
<button onclick="spin()"> <?xml version="1.0" encoding="iso-8859-1"?> <svg version="1.1" id="resetButtonSvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 179.019 179.019" style="enable-background:new 0 0 179.019 179.019;" xml:space="preserve"> <g> <g> <path style="fill:#010002;" d="M138.121,138.357c-13.02,13.008-30.312,20.174-48.714,20.174c-37.955,0-68.84-30.867-68.876-68.81 l14.046,14.064c0.931,0.925,2.429,0.925,3.359,0c0.919-0.931,0.919-2.434,0-3.359L19.315,81.797L0.698,100.426 c-0.931,0.925-0.931,2.429,0,3.359c0.459,0.465,1.068,0.692,1.671,0.692c0.615,0,1.223-0.233,1.677-0.692l11.826-11.832 c1.235,39.531,33.689,71.328,73.512,71.328c19.673,0,38.164-7.661,52.079-21.57c0.925-0.925,0.925-2.429,0-3.353 C140.562,137.426,139.052,137.426,138.121,138.357z"/> <path style="fill:#010002;" d="M178.32,75.234c-0.919-0.925-2.423-0.925-3.353,0L163.152,87.06 c-1.247-39.531-33.701-71.322-73.518-71.322c-19.685,0-38.17,7.661-52.085,21.57c-0.931,0.925-0.931,2.429,0,3.353 c0.919,0.931,2.429,0.931,3.353,0c13.014-13.008,30.312-20.174,48.714-20.174c37.949,0,68.84,30.861,68.888,68.81l-14.058-14.064 c-0.925-0.925-2.429-0.925-3.359,0c-0.919,0.931-0.919,2.434,0,3.359l18.623,18.623l18.617-18.623 C179.251,77.668,179.251,76.164,178.32,75.234z"/> </g> </g> </svg> </button>y también aplique este css en el botón y el svg
button { display: flex; align-items: center; padding: 10px; } svg { width: 25px; height: 25px; }
·
Juan Pablo Isaza
Report
Answer question