javascript - 使旋转中心点位于中心

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；给你 4 像素顶部 4 像素底部用 Photoshop 测量的。