Geek Answers Handbook

Rotate the image from its bottom

I am trying to use the needle effect, and I cannot make the needle spin from its bottom. I want the bottom of the image to remain stationary in its position, and only the top of the needle moves in a semicircle. It has been so far. Any suggestions on how to make this effect work?

$(document).ready(function() {
  setTimeout(function() {
    $(".needle").css("transform", "rotate(0deg)");
  }, 1000)
})
figure {
  position: relative;
  display: inline-block;
}
.graph {
  width: 300px;
}
.needle {
  position: absolute;
  width: 160px;
  left: 15px;
  bottom: -28px;
  transform: rotate(-171deg);
  -webkit-transform: rotate(-171deg);
  transition: all 7s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<figure>
  <img src="http://1.bp.blogspot.com/-XqCc5ql8Xqc/T6DuArRFB0I/AAAAAAAAADA/IK6fKAjzkOc/s1600/Finished+semi-circle+3.png" class="graph" />
  <img src="http://www.kiteinnovation.com/wp-content/themes/naked-wordpress-master/images/arrow.png" class="needle" />
</figure>
Run codeHide result
+4
source share
1 answer

Use css property transform-origin

$(document).ready(function() {
  setTimeout(function() {
    $(".needle").css("transform", "rotate(0deg)");
  }, 1000)
})
figure {
  position: relative;
  display: inline-block;
 }
  .graph {
    width: 300px;
  }
  .needle {
    position: absolute;
    width: 160px;
    right: 15px;
    bottom: -28px;
    transform: rotate(-171deg);
    transform-origin: left;
    -webkit-transform: rotate(-171deg);
    transition: all 7s;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<figure>
  <img src="http://1.bp.blogspot.com/-XqCc5ql8Xqc/T6DuArRFB0I/AAAAAAAAADA/IK6fKAjzkOc/s1600/Finished+semi-circle+3.png" class="graph" />
  <img src="http://www.kiteinnovation.com/wp-content/themes/naked-wordpress-master/images/arrow.png" class="needle" />
</figure>
Run codeHide result
+6
source

More articles:


All Articles