Блог

Главная - Вопросы по программированию - Текст переводится вниз при повороте

Текст переводится вниз при повороте

#javascript #html #css #css-animations

Вопрос:

Я создаю кнопку сброса для суммирования как часть веб-приложения. когда вы нажимаете на кнопку, она вращает значок сброса. Для этого я использую transform rotate для вращения текстового элемента, но когда я его вращаю, он оказывается ниже, чем когда он начинался. Я понятия не имею, почему это происходит, но поиск ответа в Интернете ни к чему меня не привел. любая помощь будет оценена по достоинству.

перед анимацией вращения:
после анимации вращения

ключевые кадры:

 @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, но вместо этого я использовал Юникод.

Комментарии:

1. У вас есть свой вспомогательный HTML-код для этого вопроса?

2. transform-origin: center; Я верю, но, если бы у нас был HTML, я бы не стал комментировать без предварительного тестирования, но попробуйте это, и если это не сработает. опубликуйте свой HTML-код.

Ответ №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;
}
Метки: