Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <button id="zoomin">Zoom In</button>
  <button id="zoomout">Zoom Out</button>
  <div class="zoomable"></div>
</body>
</html>
 
.zoomable {
  width: 100px;
  height: 100px;
  margin: .5em 0;
  
  background: skyblue;
  
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  
  transition: -webkit-transform .4s;
  transition: transform .4s;
}
 
(function () {
  function zoom(element, scale) {
    element.style.webkitTransform =
      element.style.transform = 'scale(' + scale + ')';
    return scale;
  }
  
  var zoomable = document.querySelector('.zoomable');
  var scale = 1;
  
  document.querySelector('#zoomin')
    .addEventListener('click', function () {
      scale = zoom(zoomable, scale * 2);
    });
  
  document.querySelector('#zoomout')
    .addEventListener('click', function () {
      scale = zoom(zoomable, scale * 0.5);
    });
})();
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers