Bild von seiner Unterseite drehen

Question

Ich versuche, für einen Nadeleffekt zu gehen, und ich kann nicht scheinen, die Nadel zu bekommen, um von seiner Unterseite zu drehen. Ich möchte, dass der untere Teil des Bildes in seiner Position fixiert bleibt und sich nur die Spitze der Nadel entlang des Halbkreises bewegt. Das war ich bisher. Irgendwelche Vorschläge, wie dieser Effekt funktioniert?

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

Verwenden css transform-origin Eigenschaft

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