Rotate Image From Its Bottom - css

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>

Answer 1

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>