CODEWITHSUNDEEP
javascriptjquerycsscss-transforms
TheOrion
TheOrion

Reputation: 131

How can I avoid the automatic left alignment in rotation?

I am trying to move and rotate the object in the direction of the mouse click. Unfortunately during the first click object automatically align itself to left. It works perfectly after the first click but it doesn't work during the first click. I couldn't find out why it goes automatically to upper left corner. How can I fix that? Here is the code:

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>

Upvotes: 0

Views: 36

Answers (1)

Temani Afif
Temani Afif

Reputation: 272817

Because initially the transform is set in the CSS thus you cannot append the rotation to it and you will simply override it. Make it inline using JS and it will work fine. It will behave like the next ones since later you will be adding all the transform inline:

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>

Upvotes: 1

Related Questions