JSFiddle - React, Tailwind, and code Playground

by tonyleeper

HTML

<div class="stage">
    <div class="zoomable">
        <div class="box">Hello</div>
        <div class="box">World</div>
        <div class="box">Hello</div>
        <div class="box">World</div>
    </div>
</div>
<button class="zoom-in">+</button>
<button class="zoom-out">-</button>

CSS

.stage {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.zoomable {
    transform: scale(1);
}

.box {
    width: 100px;
    height: 100px;
    margin: 30px;
    background-color: darkblue;
    color: white;
}

.zoom-in {
    position: fixed;
    top: 0;
    right: 40px;
}

.zoom-out {
    position: fixed;
    top: 0;
    right: 10px;
}

JavaScript

var scale = 1;
var zoomIn = document.querySelector('.zoom-in');
var zoomOut = document.querySelector('.zoom-out');
var zoomable = document.querySelector('.zoomable');
zoomIn.addEventListener('click', function () {
	scale += .05;
	zoomable.style.transform = 'scale(' + scale + ')';
});
zoomOut.addEventListener('click', function () {
	scale -= .05;
	zoomable.style.transform = 'scale(' + scale + ')';
});