Сделать центральную точку поворота в центре

Я пытаюсь повернуть элемент с анимацией. Я смог успешно реализовать это, но проблема в том, что когда он вращается, текст в div не вращается с середины, поэтому получается, что он немного шаткий.Сделать центральную точку поворота в центре

Как сделать центральную точку поворота в середине div?

JSFiddle

var container = document.getElementById('container'), 
 
    buttonContainer = document.getElementById('buttonContainer'), 
 
    button = document.getElementById('button'); 
 

 
buttonContainer.addEventListener('click', expandElem); 
 

 
function expandElem(e) { 
 
    toggleClass(button, 'expand'); 
 
} 
 

 
function hasClass(ele, cls) { 
 
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); 
 
} 
 

 
function addClass(ele, cls) { 
 
    if (!hasClass(ele, cls)) ele.className += " " + cls; 
 
} 
 

 
function removeClass(ele, cls) { 
 
    if (hasClass(ele, cls)) { 
 
    var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)'); 
 
    ele.className = ele.className.replace(reg, function(match) { 
 
     if (match.match(/^\s.+\s$/) !== null) return ' '; 
 
     else return ''; 
 
    }); 
 
    } 
 
} 
 

 
function toggleClass(element, className) { 
 
    if (!element || !className) return; 
 

 
    if (hasClass(element, className)) removeClass(element, className); 
 
    else addClass(element, className); 
 
}

#buttonContainer { 
 
    cursor: pointer; 
 
    width: 100px; 
 
    height: 100px; 
 
    font-size: 20px; 
 
    font-weight: bold; 
 
    margin: auto; 
 
    color: white; 
 
} 
 
#button { 
 
    width: 60px; 
 
    height: 60px; 
 
    line-height: 60px; 
 
    font-size: 50px; 
 
    display: inline-block; 
 
    transform: rotate(0deg); 
 
    transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1); 
 
} 
 
#button.expand { 
 
    transform: rotate(630deg); 
 
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); 
 
} 
 
#container { 
 
    margin: auto; 
 
    top: 5vh; 
 
    background-color: #03A9F4; 
 
    border-radius: 25px; 
 
    width: 100px; 
 
    max-width: 100px; 
 
    height: 100px; 
 
    text-align: center; 
 
    transition: all 0.2s 0.45s, height 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.25s, max-width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.35s, width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.35s; 
 
}

<div id="container"> 
 
    <div id="buttonContainer"> 
 
    <span id="button">&#128339;</span> 
 
    <span id="title">History</span> 
 
    </div> 
 
</div>

источник

2016-04-13 Horay

Причина в том, что фактический глиф часов не центрирован по вертикали ... это проблема с шрифтом. «Часы» на самом деле слегка смещены к вершине - https://jsfiddle.net/w8qh4ehj/ –

@Paulie_D Думаю, вы нанесли удар по «точке»! Как я могу узнать, сколько пикселей оно выключено? – Horay

Понятия не имею, вам нужно будет сыграть это некоторое время и посмотреть, что пробная версия и ошибка вас. Пара пикселей верхнего заполнения может быть примерно одинаковой. –

высота линии: 63.5px; дает вам 4pixel top 4pixel bottom, измеренное с помощью Photoshop.

источник

2016-04-13 18:37:43

Спасибо! Я просто измерил его, верхняя часть - 18, а нижняя - 19 – Horay

https://jsfiddle.net/purL5mz9/2/ – Horay

Сделать центральную точку поворота в центре

ответ

Смежные вопросы