如何用CSS平滑地放大到一个特定的点？

Question

当我在图片上方盘旋时，我想放大到铅笔上。

HTML：

<div>
</div>

CSS：

div {
    width: 400px;
    height: 267px;
    border: 1px solid black;
    background-image: url('http://i.imgur.com/n9q7jhm.jpg');
    background-size: 400px 267px;
    transition: all 1s ease;
}

div:hover{
    background-size: 500px 333px;
    background-position: -60px -60px;
}

JSFiddle：http://jsfiddle.net/AX59Y/

​

​

我天真的尝试是增加图像的大小和改变图像的位置，然而，正如你可以从琴弦中看到的那样，当它试图同时完成两个转换时，过渡是非常曲折的。

有更好的办法吗？

Answer 1

从SW4获取答案，并更改转换原点的左侧和顶部更改

#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;
    -webkit-transform-origin: 75% 75%;
    transform-origin: 75% 75%;
}
#wrapper:hover #image {
    -webkit-transform: scale(2);
    transform: scale(2);
}

75%的75%或多或少是铅笔的位置，但你可以把它设置成任何你想要的。

小提琴

Answer 2

您可以使用转换来在悬停时缩放和重新定位图像，为了做到这一点，您需要将图像div封装在具有溢出隐藏的父文件中。

演示Fiddle

HTML

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

CSS

#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;
}
#wrapper:hover #image {
    transform: scale(2);
    -webkit-transform: scale(2);
    left:-150px;
    top:-100px;
}

Answer 3

如果你改变你的过渡到linear，它看起来更少的‘锯齿’。

transition: all 1s linear;

不知道这是不是你想要的行为。