为什么我的Transform:Scale()属性会将图像向左移动?

2022-09-06 00:00:00 html css css-transforms

我正在尝试制作一个使用css动画的图片库,但出现了一些奇怪的效果。我有一个较小的缩略图开始,我希望它缩放到两倍大小时,我悬停在它上面。这部分可以,但它也会使它向左移动,最终会越过屏幕的边缘。我应该做些什么来修复它?

数据-lang="js"数据-隐藏="假"数据-控制台="假"数据-巴贝尔="假">
.zoom {
    transition:1s ease-in-out;
}
.zoom:hover {
    transform:scale(2);
}
<div class="content">
    <div class="zoom">
        <img alt="Paperplane" src="Paperplane.png" style="width: 200px; height: 62px">
        <br> <span class="caption">A paper plane</span>
    </div>
</div>

JSFIddle Demo


解决方案

它没有向左移动。但是,左侧边缘正在移动,右侧也是如此。因为您的内容是左对齐的,所以它看起来会向左移动。这个彩色演示很好地展示了这一点:

数据-lang="js"数据-隐藏="真"数据-控制台="真"数据-巴贝尔="假">
.zoom {
  transition: 1s ease-in-out;
  background: pink;
}

.zoom:hover {
  transform: scale(2);
}
<div class="content">
  <div class="zoom">
    <img alt="Paperplane" src="https://via.placeholder.com/200" style="width: 200px; height: 62px" />
    <br /> <span class="caption">A paper plane</span>

  </div>
</div>

您可以设置转换原点:

transform-origin: left top;
数据-lang="js"数据-隐藏="真"数据-控制台="真"数据-巴贝尔="假">
.zoom {
  transition: 1s ease-in-out;
  background: pink;
}

.zoom:hover {
  transform: scale(2);
  transform-origin: left top;
}
<div class="content">
  <div class="zoom">
    <img alt="Paperplane" src="https://via.placeholder.com/200" style="width: 200px; height: 62px" />
    <br /> <span class="caption">A paper plane</span>

  </div>
</div>

还可以考虑简单地使用不那么戏剧性的转换:

transform: scale(1.1);
数据-lang="js"数据-隐藏="真"数据-控制台="真"数据-巴贝尔="假">
.zoom {
  transition: 1s ease-in-out;
  background: pink;
}

.zoom:hover {
  transform: scale(1.1);
}
<div class="content">
  <div class="zoom">
    <img alt="Paperplane" src="https://via.placeholder.com/200" style="width: 200px; height: 62px" />
    <br /> <span class="caption">A paper plane</span>

  </div>
</div>

相关文章