html - 如何使用 CSS 放大图像的特定位置

Question

我正在使用以下代码来放大图像:

<style type="text/css">
.thumbnail {
    width: 100%;
    height: 450px;
    overflow:hidden;
}
.image {
    width: 100%;
    height: 100%;    
}
.image img {
    -webkit-transition: all 1s ease; /* Safari and Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -ms-transition: all 1s ease; /* IE 9 */
    -o-transition: all 1s ease; /* Opera */
    transition: all 1s ease;
}
.image:hover img {
    -webkit-transform:scale(3); /* Safari and Chrome */
    -moz-transform:scale(3); /* Firefox */
    -ms-transform:scale(3); /* IE 9 */
    -o-transform:scale(3); /* Opera */
     transform:scale(3);
}
 </style>


 <div class="thumbnail">
  <div class="image">
   <img src="example.jpg" alt="Image zoom">
  </div>
 </div>

目前此代码有效，除了 in 只会缩放到图像的中心。我的问题是:如何放大到预先确定的位置(可以像向左或向右一样简单，而不是当前的中心。)如果可能的话，我想使用 CSS 实现结果。

Answer 1

使用 Transform Origin 属性，可以设置原点。这将允许您控制从/到缩放发生的位置。

transform-origin: top right; 等