使用CSS3根据鼠标位置平移图像方向

Panning an image direction based on mouse position with CSS3

本文关键字：图像 方向 位置 鼠标 CSS3 使用      更新时间：2023-09-26

好的，所以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。CSS不能告诉你鼠标移动的方向，只有当它在一个元素上。

你让我想在CSS中尝试一下，实际上你可以做一些技巧让它在某种程度上工作，但它绝对是更好的js，你可以检测到你的鼠标移动。

不管怎样，我就是这样做的，两边都可以平移。

创建一个容器，并将所有div居中，然后将其宽度设置为图像的两倍。假设你的图片宽度为300px，高度为300。

HTML: 

<div class="container"></div>
CSS: 

.container {
    display: flex;
    justify-content: center;
    width: 600px;
    height: 300px;
}

在此容器中放置您的图像，并在其前后各放置一个div。

<div class="container">
    <div class="left"></div>
    <img src="yourimage.png" alt="">
    <div class="right"></div>
</div>

这两个div必须具有与图片相同的高度和宽度的一半，并且必须给出它们的相对位置。

.left,
.right {
    height: 100%;
    position:relative;
    width: 150px;
}

现在我们想把这两个div放在图像的顶部，以触发悬停。

.left {
    left: 150px;
}
.right {
    right: 150px;
}

现在，因为它们在图像的顶部，我们只需要在悬停时添加padding(从右到右和从左到左)来移动图像。

.right:hover {
    padding-right: 50px;
}
.left:hover {
    padding-left: 50px;
}

由于容器居中所有div，如果一个div有填充，它会将所有其他div沿此方向移动。

参见提琴:https://jsfiddle.net/L5c6xyLh/1/

相关文章：