Apply Two Different Css Transforms Simultanesouly

I am working on a script to adjust an image using transform left and right based on the cursor position. There is also some CSS to zoom the image on hover. My JS is using the tran

Solution 1:

transform is a single property, so you can't target from CSS for only part of it, e.g, you cannot set different CSS transition-duration for two transform-functions applied in the same transform property.

You could write everything through js, updating yourself both transform-functions values over time, but that would be a lot of work, for a potentially non-hardware accelerated result, while there is a simple workaround.

The easiest solution is to change a little bit your structure so that you apply the scale on a wrapper element, and the translate on the inner-one.

This way, both transforms are applied on your inner <img>, but they don't conflict each other.

// JavaScript source codevar catchX = 0,
  catchY = 0,
  x = 0,
  y = 0,
  burn = 1 / 28;

functionimageWatch() {
  x += (catchX - x) * burn;

  translate = 'translate(' + x + 'px, ' + y + 'px)';

  $('.image-area img').css({
    '-webit-transform': translate,
    '-moz-transform': translate,
    'transform': translate
  });

  window.requestAnimationFrame(imageWatch);
}

$(window).on('mousemove click', function(e) {

  var mouseX = Math.max(-100, Math.min(100, $(window).width() / 2 - e.clientX));
  catchX = (26 * mouseX) / 100;

});

imageWatch();

html,
body {
  height: 100%
}

body {
  margin: 0;
  padding: 0;
}

*,
*::before,
*::after {
  content: "\0020";
  box-sizing: border-box;
}

.poster {
  display: inline-block;
  width: 32vw;
  height: 100vh;
  position: relative;
  overflow: hidden !important
}

.image-area {
  position: absolute;
  width: 100%;
  height: 100vh;
  opacity: .24;
  transition: 2.5s ease;
}

.image-area {
  opacity: 1;
}

.image-areaimg {
  margin-top: -312px;
  margin-left: -913px;
  width: auto;
  /* height: auto */height: 1000px;
 /* here we can remove the transition */
}


/* scaling on hover is only applied on the parent elmt */.image-area>.scaler {
  transform: scale(1, 1);
  transition: 8s transform;
}

.poster:hover.image-area>.scaler {
  transform: scale(1.3, 1.3);
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="poster"><divclass="image-area"><!-- the scaling wrapper--><divclass="scaler"><imgclass="poster"src="https://vignette1.wikia.nocookie.net/logopedia/images/f/fc/Sky_Believe_in_better_logo.jpg/revision/latest?cb=20110910152552"alt="Sky" /></div></div></div><divclass="poster"><divclass="image-area"><!-- the scaling wrapper--><divclass="scaler"><imgclass="poster"src="https://vignette1.wikia.nocookie.net/logopedia/images/f/fc/Sky_Believe_in_better_logo.jpg/revision/latest?cb=20110910152552"alt="Sky" /></div></div></div><divclass="poster"><divclass="image-area"><!-- the scaling wrapper--><divclass="scaler"><imgclass="poster"src="https://vignette1.wikia.nocookie.net/logopedia/images/f/fc/Sky_Believe_in_better_logo.jpg/revision/latest?cb=20110910152552"alt="Sky" /></div></div></div>