una_chou 于 2017.09.08 00:10 提问

`````` 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) + ')')
}
``````

2个回答

showbo      2017.09.08 09:11

``````
<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" />
``````
XianRenShan   2017.09.08 08:50