0
\$\begingroup\$

I'm attempting to get an image to spin a certain amount when a separate div is clicked - in this case, a 72 degree rotation.

I've added clickable divs in the top right and left of the viewport, that should make the planet image spin 72 degrees on each click.

However, it only spins once. Unless I click it before the end of the animation, which is a weird effect. Can you please review this code and let me know why I can only spin once?

https://codepen.io/Punchyoual/pen/oGRLpX

HTML:

<body>

<div>
  <div id="left-button"></div>
  <div id="right-button"></div>
    <div id='inner-orbit'>
  </div>
</div>

</body>

CSS:

body {
  background-image:url('https://space-facts.com/wp-content/uploads/magellanic-clouds.png');
  overflow:hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

#left-button {
  position:fixed;
  top:0px;
  left:0px;
  height:50px;
  width:50px;
  background-color:red;
}

#right-button {
  position:fixed;
  top:0px;
  right:0px;
  height:50px;
  width:50px;
  background-color:red;
}

#inner-orbit {
  margin:0 auto;
  width:150vw;
  height:145vw;
  text-align:center;
  background-image:url('https://my-rewards.co.uk/s3/W1siZiIsIjIwMTcvMTAvMjMvMTUvNDMvNTAvODE3L3BsYW5ldHMyXzAxLnBuZyJdXQ?sha=069b6bb83dffffde');
    background-size: 100% 100%;
    background-repeat: no-repeat;
  /*-webkit-animation: spin-right 25s linear infinite;
  animation: spin-right 25s infinite;
  transform:rotate(72deg);*/
}


#inner-orbit{transition: all 2s ease-in-out;}

@-webkit-keyframes spin-right {
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

JS:

var degrees = 0;

$("#right-button").click(function() {

  degrees += 72;

  //$('.img').addClass('rotated'); // for one time rotation

  $("#inner-orbit").css({
    transform: "rotate(" + degrees + "deg)",
    "-ms-transform": "rotate(" + degrees + "deg)",
    "-moz-transform": "rotate(" + degrees + "deg)",
    "-webkit-transform": "rotate(" + degrees + "deg)",
    "-o-transform": "rotate(" + degrees + "deg)"
  });

  console.log(degrees);
});

$("#left-button").click(function() {

  degrees -= 72;

  //$('.img').addClass('rotated'); // for one time rotation

  $("#inner-orbit").css({
    transform: "rotate(" + degrees + "deg)",
    "-ms-transform": "rotate(" + degrees + "deg)",
    "-moz-transform": "rotate(" + degrees + "deg)",
    "-webkit-transform": "rotate(" + degrees + "deg)",
    "-o-transform": "rotate(" + degrees + "deg)"
  });

  console.log(degrees);
});
\$\endgroup\$

closed as off-topic by 200_success Oct 23 '17 at 16:52

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions containing broken code or asking for advice about code not yet written are off-topic, as the code is not ready for review. After the question has been edited to contain working code, we will consider reopening it." – 200_success
If this question can be reworded to fit the rules in the help center, please edit the question.

0
\$\begingroup\$

I'm not a smart man.

Just figured out that I was covering the buttons with the #orbit div...

<body>
  <div>
    <div id='orbit'></div>
    <div id="left-button"></div>
    <div id="right-button"></div>
  </div>
</body>
\$\endgroup\$

Not the answer you're looking for? Browse other questions tagged or ask your own question.