使中心旋转中心

Question

我正在尝试使用动画旋转元素。我能够成功地实现它，但问题是，当它旋转时，if(c == 'o' || c == 'x') game_start=true; else System.out.println("you can only enter o or x!"); 中的文本不会从中间旋转，所以它会有点摇摆不定。< / p>

如何在div？

的中间设置旋转的中心点

JSFiddle

＆＃13;

＆＃13;

div

＆＃13;

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);
}

＆＃13;

#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;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

行高：63.5px;给你4个像素的顶部4pixel底部用photoshop测量它。