从底部旋转图像

Question

我正试图去针刺效果,我似乎无法让针从底部旋转.我希望图像的底部保持固定在其位置,并且只是针的顶部沿着半圆移动.这是我到目前为止.有关如何使这种效果起作用的任何建议？

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

使用css 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>