Изменение CSS свойств scale и zoom у элемента

Как задать шаг изменения CSS свойств scale и zoom у элемента $('img')?
$(document).ready(function() { $(document).keypress(function(event) { a = $('img').height(); //height b = $('img').width(); //width
c = parseInt(a) + 10; //width plus one step Intvalue d = parseInt(b) + 10; //height plus one step Intvalue
e = parseInt(a) - 10; //width minus one step Intvalue f = parseInt(b) - 10; //height minus one step Intvalue
if (event.keyCode == 107) { //scale или zoom вместо width и height
$('img').css('width', d + 'px') //change css Intvalue + "px" $('img').css('height', c + 'px') //change css Intvalue + "px" } if (event.keyCode == 109) { //scale или zoom вместо width и height
$('img').css('height', e + 'px')//change css Intvalue + "px" $('img').css('width', c + 'px')//change css Intvalue + "px" } })

Ответ

Идея реализация весьма схожа с предыдущим вопросом. Отличиями являются наличие parseFloat() (потому что .css('свойство') возвращает String) и использование регулярного выражения (взятого из этого вопроса) для получения значений scale из transform.
HTML:

CSS:
#img1 { position: absolute; margin: auto; top: 0; left: 0; bottom: 0; right: 0; width: 300px; height: 300px; zoom: 100%; transform: scale(1, 1); }
JS:
$(document).ready(function() { $(document).on("keypress", function(event) { var image = $('img'); var imageZoom = parseFloat(image.css('zoom')); var imageTransform = image.css('transform'); var matrixRegex = /matrix\((-?\d*\.?\d+),\s*0,\s*0,\s*(-?\d*\.?\d+),\s*0,\s*0\)/, matches = imageTransform.match(matrixRegex); var scaleX = parseFloat(matches[1]); var scaleY = parseFloat(matches[2]); if (event.which == 43 || event.which == 45) { var zoomChange = (event.which == 43) ? 0.1 : -0.1; var scaleChange = (event.which == 43) ? 0.1 : -0.1; image.css('zoom', imageZoom + zoomChange); image.css('transform', 'scale(' + (scaleX + scaleChange) + ',' + (scaleY + scaleChange) + ')'); } }); });
Пример в fiddle