中心の回転中心を

Question

アニメーションで要素を回転しようとしています。私はそれをうまく実装することができましたが、回転すると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>

Answer 1

行の高さ：63.5px。 4pixelのトップ4ピクセルのボトムをフォトショップで測定します。