JSFiddle - React, Tailwind, and code Playground

by graphettion

HTML

<div class="container" data-zoom="0">
  <img src="http://codelamp.uk/images/jsf/blue_parrot_wallpaper-normal.jpg">
</div>
<div>
  <input type="button" class="zoomIn" value="Zoom In">
  <input type="button" class="zoomOut" value="Zoom Out">
</div>

CSS

.container {
  display: inline-block;
  position: relative;
  width: 1024px;
  height: 768px;
  overflow: hidden;
}

.container img {
  position: absolute;
  width: 1024px;
  height: 768px;
  left: 0;
  top: 0;
  transition: transform 1s;
}

JavaScript

var $container = $('.container');

$('.zoomIn').on('click', function(e) {
  if ($container.data('zoom') < 5) {
    var newZoom = $container.data('zoom') + 1;

    $container.find('img').css('transform', 'perspective(500px) translateZ(' + (newZoom * 50) + 'px)');
    $container.data('zoom', newZoom);
  }
});

$('.zoomOut').on('click', function(e) {
  if ($container.data('zoom') > 0) {
    var newZoom = $container.data('zoom') - 1;

    $container.find('img').css('transform', 'perspective(500px) translateZ(' + (newZoom * 50) + 'px)');
    $container.data('zoom', newZoom);
  }
});