同时应用两种不同的CSS变换

Question

我正在制作一个脚本，根据光标位置左右变换调整图像 还有一些CSS可以在悬停时缩放图像。

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

function imageWatch() {
    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-area > img {
            margin-top: -312px;
            margin-left: -913px;
            width: auto;
            /* height: auto */
            height: 1000px;
            transform: scale(1,1);
            transition:8s all;
        }

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="poster">
    <div class="image-area">
         <img class="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 class="poster">
    <div class="image-area">
         <img class="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 class="poster">
    <div class="image-area">
         <img class="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>
   

我的JS正在使用transform属性，我的CSS也是如此，可以让它在悬停时放大。我认为这是问题所在。

如果你从CSS中删除了转换，那么脚本运行正常，但我需要transition:8s all让图像放大悬停，以及将其与光标对齐。

这S.O告诉我你可以有两个转换属性，但它们必须在一行上。我如何用我的Javascript做到这一点？

jsFiddle

Answer 1

transform是一个属性，因此您无法仅针对其中的一部分来定位CSS，例如，您无法为应用于其中的两个transform-functions设置不同的CSS transition-duration相同的transform属性。

您可以通过js编写所有内容，随着时间的推移自行更新转换函数值，但这可能需要大量工作，因为可能存在非硬件加速结果，而且有一个简单的解决方法。

最简单的解决方案是更改一点结构，以便在包装器元素上应用scale，在内部元素上应用转换。

这样，两种变换都应用于内部<img>，但它们不会相互冲突。

＆＃13;

＆＃13;

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

function imageWatch() {
  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();

＆＃13;

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-area img {
  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);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="poster">
  <div class="image-area">
    <!-- the scaling wrapper-->
    <div class="scaler">
      <img class="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>

<div class="poster">
  <div class="image-area">
    <!-- the scaling wrapper-->
    <div class="scaler">
      <img class="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>

<div class="poster">
  <div class="image-area">
    <!-- the scaling wrapper-->
    <div class="scaler">
      <img class="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>

＆＃13;

＆＃13;

＆＃13;