如何使用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/

我天真的尝试是增加大小并改变图像的位置，但是正如你从jsfiddle看到的那样，转换是非常锯齿状的，因为它试图同时完成两个转换。

有更好的方法吗？

Answer 1

您可以使用转换来放大并在悬停时重新定位图像，为此，您需要将图像div包装在隐藏溢出的父级中。

Demo 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 2

从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％或多或少是铅笔的位置，但你可以把它设置成你想要的任何东西。

fiddle

Answer 3

如果您将转换更改为linear，那么它看起来就会更加“锯齿状”。

transition: all 1s linear;

不确定这是否是您想要的行为。