怎么可以让图片 先旋转 之后再 缩放

代码：

 var rotate = 0;
        function rotatePlus() {
            $('#canvas').css('transform', 'rotate(' + (rotate += 5) + 'deg)');
        }

        function rotateRedu() {
            $('#canvas').css('transform', 'rotate(' + (rotate -= 5) + 'deg)')
        }

        var scale = 1;
        function scalePlus() {
            $('#canvas').css('transform', 'scale(' + (scale += 0.1) + ')');
        }

        function scaleRedu() {
            $('#canvas').css('transform', 'scale(' + (scale -= 0.1) + ')')
        }

上面的代码只能执行一种效果。怎么样可以让图片点击旋转的时候旋转，之后，再点击放大，可以让图片在旋转的基础上放大？

参考：https://zhidao.baidu.com/question/435007385533752884.html

叠加就行了

<div id="canvas"></div>
<style>#canvas{width:100px;height:100px;position:absolute;left:300px;top:300px;background:#eee}</style>
<script>
    var rotate = 0, rotatevalue = 5, scalevalue = 0.1, scale=1;
    function animate() {
        rotate += rotatevalue
        scale += scalevalue
        if (scalevalue < 0 && scale < 0) scale = 0;
        $('#canvas').css('transform', 'rotate(' + rotate + 'deg) scale(' + scale + ')');
    }
    setInterval(animate, 100);
</script>
<input type="button" value="rotate +" onclick="rotatevalue=5" />
<input type="button" value="rotate -" onclick="rotatevalue=-5" />
<input type="button" value="scale +" onclick="scalevalue = 0.1" />
<input type="button" value="scale -" onclick="scalevalue = -0.1" />