旋转时文本向下翻译答案

【问题标题】：Text is translated downward when rotated旋转时文本向下翻译
【发布时间】：2021-09-22 09:21:13
【问题描述】：

我正在为作为 Web 应用程序的一部分的求和创建一个重置按钮。当您单击按钮时，它会旋转重置图标。为此，我使用变换旋转来旋转文本元素，但是当我旋转它时，它最终会比开始时低。我不知道为什么会这样，但谷歌搜索答案让我无处可去。感谢您提供任何帮助。

关键帧：

@keyframes spin360 { 
    0% {
        transform: rotate(0deg); 
    }
    100% { 
        transform: rotate(-360deg); 

    } 
}

我使用这个函数在 javascript 中调用关键帧：

function spin() {
    document.getElementById("resetButtonSvg").style.animation = "spin360 0.5s ease forwards";
}

*注意它被称为resetButtonSvg，因为我打算使用SVG，但我最终使用了Unicode。

【问题讨论】：

你有支持这个问题的 HTML 吗？
transform-origin: center; 我相信，但是，如果我们有 HTML，我不会在没有先测试的情况下发表评论，但尝试一下，如果它不起作用。发布您的 HTML。

标签： javascript html css css-animations

【解决方案1】：

只需将您的 html 更改为类似的内容

    <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>

并将此 css 应用于按钮和 svg

button {
    display: flex;
    align-items: center;
    padding: 10px;
}

svg {
    width: 25px;
    height: 25px;
}

【讨论】：