Question

好的，因此可以使用CSS3将图像平移到左侧或右侧等。例如：

HTML

<html>
<div> 
<img src="pic.png" class="pan">
</div
</html>

CSS

.pan:hover {
   margin-right: -50px;
}

这就是它的工作方式。

但我希望能够让图像在鼠标移动到图像上的方向上平移。这在CSS中是否可行？

Answer 1

不，你需要JavaScript。 CSS不能告诉鼠标移动的方向，只要它在元素上方。

Answer 2

你让我想在CSS中尝试这个，实际上你可以做一些技巧，以某种方式使它工作，但它肯定更好用js，你可以检测你的鼠标移动。

无论如何，这就是我在每一方都做出的东西。

创建一个容器并将其中的所有div居中，然后将其设置为图像宽度的两倍。假设您的图像宽度为300像素，高度为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;
}

现在因为它们位于图像的顶部，我们只需要在悬停时添加填充（从右到左，从左到左）来移动图像。

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

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

由于容器中心都是div，如果一个div有一个填充，它会向这个方向移动所有其他div。

请参阅小提琴：https://jsfiddle.net/L5c6xyLh/1/

Answer 3

有了一些额外的标记，可以这样做：

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>

请注意，目标元素会覆盖图像，因此会阻止点击或选择该元素。

Fiddle

使用CSS3基于鼠标位置平移图像方向

3 个答案: