CSS放大特定的图像点 [英] CSS Zoom into specific image point

问题描述

我有一幅图像，需要根据输入的焦点来缩放特定点

I have an image which I need to zoom a specific point depending on which input is focused

到目前为止，这里只是一个小提琴

我使用了 transform 和 transform-origin 属性.在Firefox上运行良好(请注意，同时缩放时它是如何朝着该点移动的.)

I used the attributes transform and transform-origin. It's working fine on Firefox (notice how it's moving toward the point while zooming at same time).

但是在Chrome上，先完成缩放/缩放，然后再传送点.真的很混乱

However on Chrome, the scale/zoom is done first, then it teleports the point. It's actually very confusing

有什么想法要在Chrome上实现此功能吗?

Any idea how to make this work on Chrome ?

推荐答案

我尝试将transform和transform-origin都放入CSS动画中，而且似乎可以同时完成这两个步骤，因此避免了两步操作您在Chrome上看到的问题(在Edge上进行了测试):

I experimented with putting both the transform and the transform-origin into a CSS animation and it seemed to manage to do them both at once, so avoiding the 2 step problem you saw on Chrome (tested on Edge):

@keyframes focusin {
    0% {
      transform: scale(1);
      transform-origin: 0% 0%;
      }
    
    100% {
      transform: scale(3);
      transform-origin: 25% 75%;
      }
  
}

这是一个片段.我将动画时间设置为10s，这样您就可以看到将焦点放在input1上时纸张所经历的旅程".它看起来很平滑，所以有一些改进，但是并不是Edge/Chrome上的直接"功能，我认为(只是猜测)与浏览器的动画设置(或不具有动画效果)有关转换源.

Here's a snippet. I've put the animation time to 10s so you can see the 'journey' the paper takes when focus is on input1. It seems to be smooth, so a bit of an improvement, but it isn't 'direct' on Edge/Chrome which I guess (and it is only a guess) is to do with how the browser animates (or doesn't) transform-origin.

$("#input1").focus(function(e) {
 /* $("#image").css({
    "transform": "scale(3)",
    "transform-origin": "25% 75%" 
  });*/
    document.getElementById('image').style.animationName = 'focusin';
});

$("#input2").focus(function(e) {
  $("#image").css({
    "transform": "scale(3)",
    "transform-origin": "75% 25%"
  });
});

$("#input1, #input2").focusout(function(e) {
  $("#image").css({
    "transform": "scale(1)"
  });
});

#wrapper {
  width: 400px;
  height: 267px;
  border: 1px solid black;
  overflow: hidden;
  position: relative;
}

#image {
  background-image: url('http://i.imgur.com/n9q7jhm.jpg');
  background-size: 400px 267px;
  background-position: center;
 /* transition: all 1s ease; */
  width: 100%;
  height: 100%;
 /* transform: scale(1); */
  position: relative;
  left: 0;
  top: 0;
  animation-duration: 10s;
  animation-iteration-count: 1;
  animation-name: none;
  animation-fill-mode: forwards;
}
@keyframes focusin {
    0% {
      transform-origin: 0% 0%;
      transform: scale(1);
      }
    100% {
      transform-origin: 25% 75%;
      transform: scale(3);
      } 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="input1">
<input type="text" id="input2">

<div id='wrapper'>
  <div id='image'></div>
</div>

这篇关于CSS放大特定的图像点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！