4
針効果を得ようとしていますが、針が底から回転するように見えません。私は、画像の下端をその位置に固定し、針の上端を半円に沿って移動させたい。これは今まで私が持っていたことです。どのようにこの効果を働かせるための提案?イメージを底から回転
$(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>