イメージを底から回転

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>