变换 - 鼠标在父级上移动的图像原点答案

【问题标题】：Transform - origin of image on mouse move on parent变换 - 鼠标在父级上移动的图像原点
【发布时间】：2017-03-13 22:00:36
【问题描述】：

当用户在图像父元素（此处为 .carousel-img）上执行 mousemove 时，我试图在 img 上添加平滑移动效果，但我无法正常运行。

我做错了什么？

$('.carousel-img').on('mousemove', function(e){
  $('.carousel-img img').css({'transform-origin': ((e.pageX - $('.carousel-img img').offset().left) / $('.carousel-img img').width()) * 100 + '% ' + ((e.pageY - $('.carousel-img img').offset().top) / $('.carousel-img img').height()) * 100 +'%'});
    })

html, body{height:100%; width:100%;}
.box{position: relative; height:100%; width:100%;}
.carousel-img {
  position: absolute;
  right:0;
  bottom:0;
  left: 0;
  top:0;
  padding:100px;

}
.carousel-img img {
  position: relative;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div class="box">
      <img src="http://placehold.it/1920x600/fff/fff">
      <div class="carousel-img">
         <img src="http://placehold.it/200x150/ff0000/ff0000" >
      </div>
</div>

【问题讨论】：

您的transform 属性声明在哪里？

标签： javascript jquery css css-transforms

【解决方案1】：

您正在更改 transform-origin 属性而不是 transform 属性。您想使用translate(x,y) 来定义您正在寻找的运动。

您还应该添加到您的img 选择器的过渡，以便移动平滑。我还添加了一些其他属性，这些属性在添加更复杂的动画（例如 translate3D 类型）时可能很有用。

检查下面更新的sn-p。

$('.carousel-img').on('mousemove', function(e) {
  var translateX = ((e.pageX - $('.carousel-img img').offset().left) / $('.carousel-img img').width()) * 100;
  var translateY = ((e.pageY - $('.carousel-img img').offset().top) / $('.carousel-img img').height()) * 100;
  var translateProperty = 'translate(' + translateX + '%, ' + translateY + '%)';

$('.carousel-img img').css({
    '-webkit-transform': translateProperty,
    '-moz-transform': translateProperty,
    '-ms-transform': translateProperty,
    '-o-transform': translateProperty,
    'transform': translateProperty
  });
});

html,
body {
  height: 100%;
  width: 100%;
}

.box {
  position: relative;
  height: 100%;
  width: 100%;
}

.carousel-img {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  padding: 100px;
}

.carousel-img img {
  position: relative;
  
  /* Add transition */
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  /* Default values for transition to be possible */
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div class="box">
      <img src="http://placehold.it/1920x600/fff/fff">
      <div class="carousel-img">
         <img src="http://placehold.it/200x150/ff0000/ff0000" >
      </div>
</div>

【讨论】：