Rotate Image From Its Bottom

Question

I am trying to go for a needle effect and I cannot seem to get the needle to rotate from its bottom. I want the bottom of the image to stay fixed in its position and just the top of the needle to move along the half circle. This is was I have so far. Any suggestions on how to get this effect to 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>


Show source
| css   | animation   | transform   2016-06-29 13:06 1 Answers

Answers to Rotate Image From Its Bottom ( 1 )

  1. 2016-06-29 14:06

    Use css transform-origin property

    $(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>

Leave a reply to - Rotate Image From Its Bottom

◀ Go back