javascript - 如何避免旋转时自动左对齐？

Question

我正在尝试按鼠标单击的方向移动和旋转对象。不幸的是，在第一次点击时，对象自动向左对齐。它在第一次点击后完美运行，但在第一次点击时不起作用。我不知道为什么它会自动转到左上角。我该如何解决？这是代码:

var theThing = document.querySelector("#thing");
var container = document.querySelector("#contentContainer");
var triangle = document.querySelector("#triangle");
container.addEventListener("click", getClickPosition, false);

function getClickPosition(e) {
  var xPosition = e.clientX;
  var yPosition = e.clientY;
  var translate3dValue = "translate3d(" + xPosition + "px," + yPosition + "px,0)";
  var box = $("#thing");
  var boxCenter = [box.offset().left + box.width() / 2, box.offset().top + box.height() / 2];
  var angle = Math.atan2(xPosition - boxCenter[0], -(yPosition - boxCenter[1])) * (180 / Math.PI);
  theThing.style.transform += "rotate(" + angle + "deg)";
  setTimeout(function() {
    theThing.style.transform = translate3dValue;
  }, 500);
}

body {
      background-color: #FFF;
      padding: 0;
      margin: 0;
    }
    
    #contentContainer {
      width: 550px;
      height: 350px;
      border: 15px #EDEDED;
      overflow: hidden;
      background-color: #F2F2F2;
      cursor: pointer;
    }
    
    #thing {
      width: 75px;
      height: 75px;
      background-color: rgb(255, 207, 0);
      border-radius: 0%;
      transform: translate3d(200px, 100px, 0);
      transition: transform.2s ease-in;
    }
    
    #triangle {
      width: 0;
      height: 0;
      border-left: 30px solid transparent;
      border-right: 45px solid transparent;
      border-bottom: 75px solid black;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="contentContainer">
  <div id="thing">
    <div id="triangle">
    </div>
  </div>
</div>

Answer 1

因为最初变换是在 CSS 中设置的，因此您不能将旋转附加到它，您将简单地覆盖它。使用 JS 使其内联，它将正常工作。它的行为与下一个一样，因为稍后您将添加所有内联转换:

var theThing = document.querySelector("#thing");
var container = document.querySelector("#contentContainer");
var triangle = document.querySelector("#triangle");
container.addEventListener("click", getClickPosition, false);

theThing.style.transform="translate3d(200px, 100px, 0)";

function getClickPosition(e) {
  var xPosition = e.clientX;
  var yPosition = e.clientY;
  var translate3dValue = "translate3d(" + xPosition + "px," + yPosition + "px,0)";
  var box = $("#thing");
  var boxCenter = [box.offset().left + box.width() / 2, box.offset().top + box.height() / 2];
  var angle = Math.atan2(xPosition - boxCenter[0], -(yPosition - boxCenter[1])) * (180 / Math.PI);
  theThing.style.transform += "rotate(" + angle + "deg)";
  setTimeout(function() {
    theThing.style.transform = translate3dValue;
  }, 500);
}

body {
      background-color: #FFF;
      padding: 0;
      margin: 0;
    }
    
    #contentContainer {
      width: 550px;
      height: 350px;
      border: 15px #EDEDED;
      overflow: hidden;
      background-color: #F2F2F2;
      cursor: pointer;
    }
    
    #thing {
      width: 75px;
      height: 75px;
      background-color: rgb(255, 207, 0);
      border-radius: 0%;
      /*transform: translate3d(200px, 100px, 0);*/
      transition: transform.2s ease-in;
    }
    
    #triangle {
      width: 0;
      height: 0;
      border-left: 30px solid transparent;
      border-right: 45px solid transparent;
      border-bottom: 75px solid black;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="contentContainer">
  <div id="thing">
    <div id="triangle">
    </div>
  </div>
</div>