Zoom and Scale

Make CSS transform scale behave like zoom.

HTML

<h2>
 Oridinary Transform- Scaled down, leaves empty space around
</h2>
<div class="wrapper">
  <div class="red box">

  </div>
  <div class="blue box scaled">

  </div>
  <div class="yellow box">

  </div>
</div>
<h2>
 Zoom - Scaled Down , wraps the content
</h2>
<div class="wrapper">
  <div class="red box">

  </div>
  <div class="blue box zoomed">

  </div>
  <div class="yellow box">

  </div>
</div>
<h2>
 Transform- Using wrapper to set correct width, height for behaviour like zoom
</h2>
<div class="wrapper">
  <div class="red box">

  </div>
  <div class="scaleWrapper">
    <div class="blue box zoomed">

    </div>
  </div>

  <div class="yellow box">

  </div>
</div>
<h2>
 Transform- Using margins to achieve behaviour like zoom
</h2>
<div class="wrapper">
  <div class="red box">

  </div>
  <div class="blue box scaled margins">

  </div>
  <div class="yellow box">

  </div>
</div>

CSS

body {
  width: 610px;
}

.box {
  height: 200px;
  width: 200px;
  display: inline-block;
}

.red {
  background: red;
}

.yellow {
  background: yellow;
}

.blue {
  background: blue;
}

.scaled {
  transform: scale(0.5);
}

.zoomed {
  zoom: 0.5
}

.wrapper {
  height: 100%;
  width: 100%;
  background: teal;
}

.scaleWrapper {
  height: 100px;
  width: 100px;
  display: inline-block;
}

.margins {
  transform-origin: center center;
  margin: -50px -50px -50px -50px;
}