Javascript 如何同时旋转和缩放图像？

我有一个图像元素

<img id="image">

对于以下功能：-

 $('.js-rotate-right').on('click', function() {
      angle += 15;
      console.log(scale);
      $('#image').css('transform','rotate(' + angle + 'deg)', 'scale(' + scale + ')');
  });

---

但仍然没有效果。

问题在于每次设置新值时都会覆盖先前的

transform

值。要解决此问题，您可以在每次更改后构建

transform

设置，并使该值同时包含

rotate

和

scale

设置，如下所示：

function updateCSS() {
  $('#image').css('transform','rotate(' + angle + 'deg) scale(' + scale + ')');
}

var角度=0；
var量表=1；
var$img=$（“#图像”）；
$img.on（'transform'，function（）{
$img.css（'transform'，'rotate（${angle}deg）scale（${scale}）`）；
});
$（'.js向右旋转'）。在（'click'，function（）上{
角度+=15；
$img.trigger（'transform'）；
});
$（'.js向左旋转'）。在（'click'，function（）上{
角度-=15；
$img.trigger（'transform'）；
});
$（'.js放大'）.on（'click'，function（）{
刻度+=0.25；
如果（比例==2.25）{
比例=2；
};
$img.trigger（'transform'）；
});
$（'.js缩小'）。在（'click'，function（）上{
比例-=0.25；
如果（比例==0）{
比例=0.25；
}
$img.trigger（'transform'）；
});
img{
显示：块；
宽度：100px；
高度：100px；
背景色：#C00；
位置：绝对位置；
顶部：75px；
左：75px；
}

放大
缩小
右转
向左旋转
我建议您创建一个函数来进行CSS更改。大概是这样的：

function updateCSS() {
  $('#image').css('transform','rotate(' + angle + 'deg) scale(' + scale + ')');
}

…然后在您声明的所有事件处理程序中调用此函数

设置
rotate
和
scale
的代码唯一的问题是，您需要将这两个属性都放在
.css（）
jQuery方法的参数2中，并用空格字符分隔它们。
您的
变换
编写不正确，无法同时应用缩放和旋转。此外，最好添加一个函数来处理多个作业，如绑定检查，以简化代码：



我的形象
放大
缩小
右转
向左旋转
var角=0；
var量表=1；
$（'.js rotate right'）。on（'click'，function（）{setTransform（+15,0）}）；
$（'.js rotate left'）。在（'click'，function（）{setTransform（-15，0）}）上；
$（'.js放大'）.on（'click'，function（）{setTransform（0，+.25）}）；
$（'.js zoom out'）。on（'click'，function（）{setTransform（0，-.25）}）；
函数集变换（增量角、增量比例）{
角度+=三角洲角度；比例+=三角洲比例；
如果（标度<0.25）标度=0.25；如果（标度>2）标度=2；
$（“#image”）.css（'transform'、'scale（+'）、'scale++'、'rotate（+'angle++'deg）；//请注意，缩放和旋转与空间组合在一起
}
是！还有几点需要改进代码，就像我的代码一样；你在测试这个吗？你的反馈是什么？
 $('.js-rotate-right').on('click', function() {
      angle += 15;
      console.log(scale);
      $('#image').css('transform','rotate(' + angle + 'deg)', 'scale(' + scale + ')');
  });

function updateCSS() {
  $('#image').css('transform','rotate(' + angle + 'deg) scale(' + scale + ')');
}