JSFiddle - React, Tailwind, and code Playground
HTML
<a href="#" class="increase">+</a>
<a href="#" class="decrease">-</a>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
CSS
div {
border: 1px solid black;
width: 100px;
height: 100px;
}
JavaScript
(function () {
var currentScale = 1;
var cssPrefixesMap = [
'scale',
'-webkit-transform',
'-moz-transform',
'-ms-transform',
'-o-transform',
'transform'];
function setScale(scale) {
var scaleCss = {};
cssPrefixesMap.forEach(function (prefix) {
scaleCss[prefix] = 'scale(' + scale + ')';
});
$('div').css(scaleCss);
}
$(".decrease").click(function () {
setScale(currentScale = currentScale - 0.1);
});
$(".increase").click(function () {
setScale(currentScale = currentScale + 0.1);
});
})();