如何旋转任意角度的图像

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 = 'rotate(20deg(';工程

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="https://i.stack.imgur.com/zbLrE.png" i id="myimage" onclick="rotate ();" />