如何转换：将更多元素翻译到同一位置？

Question

这是我第一次 post 来这里。我正在做一个项目，有一件事阻碍了我，所以我想问你是否有解决方案。我有 3 张图像 display:flex 和 justify-content:center。（父母div）然后我想让它们悬停以转换（翻译）到相同的位置。就像，当我将第一个图像悬停在左边时：200px；和顶部：200px；（ex）其余两个相同，无需修改显示 flex 的原始位置。

这是一种简单的方法吗？谢谢！

我也想稍后在 JS 中制作它们，但首先我想让它正常工作

这就是我想做的：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img {
    width: 100px;
    height: 100px;
}

.container {
    background-color: red;
    height: 400px;
    width: 100%;
    display: flex;
    justify-content: center;    
}

.img-test1:hover {
    transition: 3s;
    transform: translate(200px, 200px);
}

.img-test2:hover {
    transition: 3s;
    transform: translate(200px, 200px);
}

.img-test3:hover {
    transition: 3s;
    transform: translate(200px, 200px);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <img class ="img-test1" src="./Asset_1.svg" alt="">
        <img class ="img-test2" src="./Asset_2.svg" alt="">
        <img class ="img-test3" src="./Asset_3.svg" alt="">
    </div>
</body>
</html>

Answer 1

要复制图片中给出的定位，您需要将第一个元素在 x 方向上移动 0，第二个元素移动 -100px，第三个元素移动 -200px，以使它们全部转换到第一个元素的下方。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img {
    width: 100px;
    height: 100px;
}

.container {
    background-color: red;
    height: 400px;
    width: 100%;
    display: flex;
    justify-content: center;    
}

.img-test1:hover {
    transition: 3s;
    transform: translate(0, 200px);
}

.img-test2:hover {
    transition: 3s;
    transform: translate(-100px, 200px);
}

.img-test3:hover {
    transition: 3s;
    transform: translate(-200px, 200px);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <img class ="img-test1" src="./Asset_1.svg" alt="">
        <img class ="img-test2" src="./Asset_2.svg" alt="">
        <img class ="img-test3" src="./Asset_3.svg" alt="">
    </div>
</body>
</html>

Answer 2

对于最简单的答案，使用 CSS 变量和 calc() 函数。

一次所有元素！！简单快捷

如果你想的话我评论了代码...

第一个元素有一个 --i 变量为 0，所以它将是 0 位置 x
第二个元素有一个 --i 变量为 1，所以它将是 -100 位置 x
第三个元素有一个 --i var 和 2，所以它将是 -200 位置 x

关于这个的令人惊奇的部分是，如果你想添加更多图像，这对你来说很容易，因为公式是由 CSS（不是你）

计算的

这里是固定码：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* here the trick */
  --end-position: calc(-100px * var(--i));
}

img {
  width: 100px;
  height: 100px;
}

.container {
  background-color: red;
  height: 400px;
  width: 100%;
  display: flex;
  justify-content: center;
}


/* use the DRY method (Dont Repeat Yourself) */

.container img:hover {
  transition: 3s;
  /* one time for all, that's easy! and fast*/
  transform: translate(var(--end-position), 200px);
}

<div class="container">
  <img style="--i: 0;" class="img-test1" src="https://avatars.githubusercontent.com/u/87947051?v=4" alt="">
  <img style="--i: 1;" class="img-test2" src="https://avatars.githubusercontent.com/u/87947051?v=4" alt="">
  <img style="--i: 2;" class="img-test3" src="https://avatars.githubusercontent.com/u/87947051?v=4" alt="">
</div>

如何转换：将更多元素翻译到同一位置？

How to transform: translate more elements to same position?

html

css

css-position

display

translate