Scale3d zoom in to a specific point

There is a picture that needs to be enlarged when clicked, I use the transform: scale3d property, as in the example below. But the problem is that the scale3d property scales the picture to the center. Question: how to make the zoom point not to the center, but to another point (for example, to the lower left corner of the picture) on pure JS and CSS.

document.querySelector('.image').addEventListener('click', () => {
  document.querySelector('.image').classList.toggle('start');
});

.image {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-image: url("http://lorempixel.com/600/600/nightlife");
  -webkit-transform: scale3d(1.2, 1, 1);
  -moz-transform: scale3d(1.2, 1, 1);
  -ms-transform: scale3d(1.2, 1, 1);
  -o-transform: scale3d(1.2, 1, 1);
  transform: scale3d(1.2, 1, 1);
  -webkit-transition: -webkit-transform 3s ease-in-out;
  -moz-transition: -moz-transform 3s ease-in-out;
  -ms-transition: -ms-transform 3s ease-in-out;
  -o-transition: -o-transform 3s ease-in-out;
  transition: transform 3s ease-in-out;
}


.start {
  -webkit-transform: scale3d(1, 1, 1);
  -moz-transform: scale3d(1, 1, 1);
  -ms-transform: scale3d(1, 1, 1);
  -o-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
}

<div class='image start'>

</div>