我正在尝试使用 html 和 javascript 旋转 div，但无法让它旋转到位。到目前为止，它在整个页面上将图像围成一个大圆圈，而不是在原来的位置。我认为这与我使用 div 来保存图像有关。就像它使 0 轴成为页面的中心，但我不知道如何解决这个问题。
<html>
<input type="url" name="imglink" id="imglink" placeholder="Insert image URL here" /><br>
<input type="button" value="Show Image" id="btn1"/>
</form>
<div id="photo"></div>
<script>
document.getElementById('btn1').addEventListener('click', function(){
document.getElementById('photo').innerHTML = '<img src="'+ document.getElementById('imglink').value +'" alt="Image" />';
});
</script>
<button id="button">rotate</button>>
<script>
document.getElementById("button").onclick = function(){
var curr_value = document.getElementById('photo').style.transform;
var new_value = "rotate(30deg)";
if(curr_value !== ""){
var new_rotate = parseInt(curr_value.replace("rotate(","").replace(")","")) + 30;
new_value = "rotate(" + new_rotate + "deg)";
}
document.getElementById('photo').style.transform = new_value;
};
</script>
</html>
最佳答案
尝试仅旋转父“照片”div 中的 img，如下所示 https://jsfiddle.net/ab5jkybL/
<script>
document.getElementById('btn1').addEventListener('click', function(){
document.getElementById('photo').innerHTML = '<img id="photoimg" src="'+ document.getElementById('imglink').value +'" alt="Image" />';
});
</script>
<button id="button">rotate</button>>
<script>
document.getElementById("button").onclick = function(){
var curr_value = document.getElementById('photoimg').style.transform;
var new_value = "rotate(30deg)";
if(curr_value !== ""){
var new_rotate = parseInt(curr_value.replace("rotate(","").replace(")","")) + 30;
new_value = "rotate(" + new_rotate + "deg)";
}
document.getElementById('photoimg').style.transform = new_value;
};
</script>
关于javascript - 旋转 div/img 时出现按钮问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29509022/