0
253
ViewsText is translated downward when rotated
I am createing a reset button for a sumulation as part of a web app. when you click the button it spins the reset icon. To do this I am using transform rotate to spin a text element, but when I spin it it it ends up lower than when it started. I have no idea why this is happening but googling the answer has got me nowhere. any help is appreciated thx.
keyframes:
@keyframes spin360 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
I call the keyframes in javascript using this function:
function spin() {
document.getElementById("resetButtonSvg").style.animation = "spin360 0.5s ease forwards";
}
*note it is called resetButtonSvg because I was planning to use an SVG but instead I ended up using Unicode.
·
Juan Pablo Isaza
1 answers
Answer question0
just change your html to something like this
<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>
and also apply this css on the button and the svg
button {
display: flex;
align-items: center;
padding: 10px;
}
svg {
width: 25px;
height: 25px;
}
·
Juan Pablo Isaza
Report
Answer question