好的，所以可以使用 CSS3 使图像向左或向右平移等。例如:
HTML
<html>
<div>
<img src="pic.png" class="pan">
</div
</html>
CSS
.pan:hover {
margin-right: -50px;
}
这就是它的工作原理。
但我希望能够让图像按照鼠标在图像上移动的方向平移。这在 CSS 中可能吗？
最佳答案
通过一些额外的标记可以做到这一点:
html,
body {
height: 100%;
}
.box {
position: relative;
height: 100vh;
overflow: hidden;
}
.box img {
max-width: 100%;
transition: all .5s;
}
.left {
position: absolute;
z-index: 1;
left: 0;
top: 0;
right: 50%;
bottom: 0;
background: pink;
opacity: .3;
}
.left:hover ~ img {
transform: translateX(-50%);
}
.right {
position: absolute;
z-index: 1;
left: 50%;
top: 0;
right: 0;
bottom: 0;
background: lightgreen;
opacity: .3;
}
.right:hover ~ img {
transform: translateX(50%);
}<div class="box">
<div class="left"></div>
<div class="right"></div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Wikipedia_Administrator.svg/1024px-Wikipedia_Administrator.svg.png" />
</div>请注意，目标元素会覆盖图像，因此会阻止单击或选择该元素。
关于javascript - 使用 CSS3 根据鼠标位置平移图像方向，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39257717/