Question

我正在尝试使用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>

Answer 1

尝试在父“照片”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>

Answer 2

使用CSS3你可以试试这个：

transform-origin:center center;

这应该将变换的中心设置为元素自己的中心。我找到了here。

使用按钮问题旋转div / img

2 个答案: