JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

matrix(0.545025, 0, 0, 0.545025, 62.7476, 99.1671)


<div class="panzoom" style="transform: matrix(0.471, 0, 0, 0.471, 0, 0); transform-origin: 0 0; cursor: move; transition: transform 500ms ease-in-out;">
yay div
</div>

CSS

/*

$( window ).load(function() {

  if ($(window).width() > 1900){	
    
  }

});

.panzoom

1 = 2400

*/
body {
  overflow: hidden;
}
.panzoom {
  background: red;
  width: 2400px;
  height: 1128px;
  display: block;
}

JavaScript

//var width = $( window ).width();

var scale = ($( window ).width() - 500)/2400;

$('.panzoom').ready(function(){
  $('.panzoom').css("transform","matrix("+scale+", 0, 0, "+scale+", 0, 0)");
});