Question

我想将图像旋转N度我写了这段代码，但是我该怎么办？

var N=20
    function rotateImage() {
        var img = document.getElementById('myimage');
        img.style.transform = 'rotate(Ndeg)';

    }

和

img.style.transform = 'rotate(${N}deg)';

不起作用，但是 img.style.transform ='旋转（20度）'; 有效

Answer 1

您实际上需要将变量放入字符串中。您可以使用模板文字（注意反引号，而不是单引号），如下所示：

img.style.transform = `rotate(${N}deg)`;

或者，连接字符串：

img.style.transform = 'rotate(' + N + 'deg)';

此外，我将重构您的代码以N作为参数：

function rotateImage(N) {
    var img = document.getElementById('myimage');
    img.style.transform = 'rotate(' + N + ')';

}
rotateImage(20);

或者，如果真的总是20度：

function rotateImage() {
    document.getElementById('myimage').style.transform = 'rotate(20deg)';
}

Answer 2

尝试

var N=100;
    function rotate () {
        var img = document.getElementById('myimage');
        img.style.transform = 'rotate( '+N+'deg)';
    }

<img src="http://i.stack.imgur.com/zbLrE.png" i id="myimage" onclick="rotate ();" />

如何旋转任意角度的图像

2 个答案: