如何放大图像的特定位置使用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> 

目前此代码的工作，除了将只放大到图像的中心。 我的问题是：如何缩放到预定位置（可以像左侧或右侧那样简单，而不是当前的中心）。如果可能，我希望使用CSS实现结果。

Answer 1

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

transform-origin: top right;等