這是我在這里的第一篇文章。我正在做一個專案，有一件事阻礙了我，所以我想問問你是否有解決方案。我有 3 個帶有 display:flex 和 justify-content:center 的影像。（父 div）然后我想讓它們懸停以轉換（翻譯）到相同的位置。就像，當我將第一張影像懸停向左時：200px；和頂部：200px；(ex) 其余兩個相同，無需修改 display 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>uj5u.com熱心網友回復：
對于最簡單的答案，使用帶有calc()函式的CSS 變數。
一次所有的元素！簡單快捷
如果你愿意，我評論了代碼......
第一個元素的
--ivar 為 0，因此它將是 0 位置 x第二個元素有一個
--i變數為 1，所以它將是 -100 位置 x第三個元素有一個
--i變數為 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>uj5u.com熱心網友回復：
要復制圖片中給出的定位，您需要將第一個元素在 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/403295.html
標籤：
上一篇：打開全屏選單時阻止用戶滾動