jasongrout/index.html

## index.html
<html>
<head>
<style>
  #box {
    position:absolute;
    width:400px;
    height:400px;
    top: 100px;
    left: 100px;
    border: 1px solid red;
    box-sizing: border-box;
  }

  #img {
    border: 1px solid green;
    box-sizing: border-box;
    opacity:0.6;
    transform-origin: top left;
    max-width:100%;
    max-height:100%;
    z-index: -10;
    transition: transform 0.1s;
  }

  #arrows {
    box-sizing: border-box;
    position: absolute;
    transform-origin: top left;
    top: 3;
    left: 3;
    font-size: 30px;
    font-weight: 900;
    z-index: 1;
  }
</style>
</head>
<body>
    <button id='scaleup'>scaleup</button>
    <button id='scaledown'>scaledown</button>
    <button id='left'>left</button>
    <button id='right'>right</button>
    <button id='fliph'>flip horizontal</button>
    <button id='flipv'>flip vertical</button>
    <button id='scrollbars'>scrollbars</button>
    <button id='orientation'>orientation</button>
  <div id='box' style='overflow: auto;'>
    <div id='arrows'>↸</div>
    <img id='img' src="https://raw.githubusercontent.com/jupyterlab/jupyterlab/master/docs/source/images/jupyterlab.png">
  </div>
    <script>
        let scale = 1;
        function dot([a,b,c,d], [e,f,g,h]) {
          return [a*e+b*g, a*f+b*h, c*e+d*g, c*f+d*h];
        }
        function dotVec([a,b,c,d], [e,f]) {
          return [a*e+b*f, c*e+d*f];
        }

        let rotRight = [0, 1, -1, 0];
        let rotLeft = [0, -1, 1, 0];
        let flipHMatrix = [-1, 0, 0, 1];
        let flipVMatrix = [1, 0, 0, -1];

        let matrix = [1, 0, 0, 1];

        let update = () => {
          let [a,b,c,d] = matrix;
          let [translateX, translateY] = dotVec(matrix, [1,1]);
          let transform = `matrix(${a}, ${b}, ${c}, ${d}, 0, 0) translate(${translateX < 0 ? -100 : 0}%, ${translateY < 0 ? -100 : 0}%) `;

          let t = document.getElementById('img');
          t.style.transform = `scale(${scale}) ${transform}`;

          let arrow = document.getElementById('arrows');
          arrow.style.transform = transform;
        }

        document.getElementById('scaleup').addEventListener('click', () => { scale += 0.5; update(); })
        document.getElementById('scaledown').addEventListener('click', () => { scale -= 0.5; update(); })
        document.getElementById('left').addEventListener('click', () => { matrix = dot(matrix, rotLeft); update(); })
        document.getElementById('right').addEventListener('click', () => { matrix = dot(matrix, rotRight); update(); })
        document.getElementById('fliph').addEventListener('click', () => { matrix = dot(matrix, flipHMatrix); update(); })
        document.getElementById('flipv').addEventListener('click', () => { matrix = dot(matrix, flipVMatrix); update(); })

        // Toggle overflow scrollbars
        document.getElementById('scrollbars').addEventListener('click', () => {
          let box = document.getElementById('box');
          if (box.style.overflow) {
            box.style.overflow = '';
          } else {
            box.style.overflow = 'auto';
          }
        });

        // Toggle orientation marker
        document.getElementById('orientation').addEventListener('click', () => {
          let arrows = document.getElementById('arrows');
          arrows.style.display = arrows.style.display === '' ? 'none' : '';
        })

      </script>
  </body>
</html>
	<html>
	<head>
	<style>
	#box {
	position:absolute;
	width:400px;
	height:400px;
	top: 100px;
	left: 100px;
	border: 1px solid red;
	box-sizing: border-box;
	}

	#img {
	border: 1px solid green;
	box-sizing: border-box;
	opacity:0.6;
	transform-origin: top left;
	max-width:100%;
	max-height:100%;
	z-index: -10;
	transition: transform 0.1s;
	}

	#arrows {
	box-sizing: border-box;
	position: absolute;
	transform-origin: top left;
	top: 3;
	left: 3;
	font-size: 30px;
	font-weight: 900;
	z-index: 1;
	}
	</style>
	</head>
	<body>
	<button id='scaleup'>scaleup</button>
	<button id='scaledown'>scaledown</button>
	<button id='left'>left</button>
	<button id='right'>right</button>
	<button id='fliph'>flip horizontal</button>
	<button id='flipv'>flip vertical</button>
	<button id='scrollbars'>scrollbars</button>
	<button id='orientation'>orientation</button>
	<div id='box' style='overflow: auto;'>
	<div id='arrows'>↸</div>
	<img id='img' src="https://raw.githubusercontent.com/jupyterlab/jupyterlab/master/docs/source/images/jupyterlab.png">
	</div>
	<script>
	let scale = 1;
	function dot([a,b,c,d], [e,f,g,h]) {
	return [ae+bg, af+bh, ce+dg, cf+dh];
	}
	function dotVec([a,b,c,d], [e,f]) {
	return [ae+bf, ce+df];
	}

	let rotRight = [0, 1, -1, 0];
	let rotLeft = [0, -1, 1, 0];
	let flipHMatrix = [-1, 0, 0, 1];
	let flipVMatrix = [1, 0, 0, -1];

	let matrix = [1, 0, 0, 1];

	let update = () => {
	let [a,b,c,d] = matrix;
	let [translateX, translateY] = dotVec(matrix, [1,1]);
	let transform = `matrix(${a}, ${b}, ${c}, ${d}, 0, 0) translate(${translateX < 0 ? -100 : 0}%, ${translateY < 0 ? -100 : 0}%) `;

	let t = document.getElementById('img');
	t.style.transform = `scale(${scale}) ${transform}`;

	let arrow = document.getElementById('arrows');
	arrow.style.transform = transform;
	}

	document.getElementById('scaleup').addEventListener('click', () => { scale += 0.5; update(); })
	document.getElementById('scaledown').addEventListener('click', () => { scale -= 0.5; update(); })
	document.getElementById('left').addEventListener('click', () => { matrix = dot(matrix, rotLeft); update(); })
	document.getElementById('right').addEventListener('click', () => { matrix = dot(matrix, rotRight); update(); })
	document.getElementById('fliph').addEventListener('click', () => { matrix = dot(matrix, flipHMatrix); update(); })
	document.getElementById('flipv').addEventListener('click', () => { matrix = dot(matrix, flipVMatrix); update(); })

	// Toggle overflow scrollbars
	document.getElementById('scrollbars').addEventListener('click', () => {
	let box = document.getElementById('box');
	if (box.style.overflow) {
	box.style.overflow = '';
	} else {
	box.style.overflow = 'auto';
	}
	});

	// Toggle orientation marker
	document.getElementById('orientation').addEventListener('click', () => {
	let arrows = document.getElementById('arrows');
	arrows.style.display = arrows.style.display === '' ? 'none' : '';
	})

	</script>
	</body>
	</html>