所以我希望图标移动以保持差距不变,当图标在悬停时增长时,但正如它所显示的那样,transform不适用于flexbox。我应该怎么做才能实现这个功能?如果需要,我可以在React中编写代码。
期望移动flexbox项以保持间距不变。
项目未更改位置
:root {
--bg-color: rgb(20, 20, 20);
}
body {
align-items: center;
background-color: var(--bg-color);
display: flex;
height: 100vh;
justify-content: center;
margin: 0px;
padding: 0px;
}
#icons {
display: flex;
flex-wrap: wrap;
width: calc(100% -20px);
gap: 70px;
max-width: 1500px;
white-space: nowrap
}
.icon {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 20px;
cursor: pointer;
height: 150px;
width: 150px;
transition: transform 400ms cubic-bezier(.05, .43, .25, .95);
}
img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 20px;
}
#icons .icon:hover {
transform: scale(1.5);
}
#icons .icon:not(:hover) {
flex-grow: 1;
}
<div class="group-icon" id="icons">
<div class="icon">
<img src="https://images.pexels.com/photos/2269872/pexels-photo-2269872.jpeg?auto=compress&cs=tinysrgb&w=1600">
</div>
<div class="icon">
<img src="https://images.pexels.com/photos/2385044/pexels-photo-2385044.jpeg?auto=compress&cs=tinysrgb&w=1600">
</div>
<div class="icon">
<img src="https://images.pexels.com/photos/2385044/pexels-photo-2385044.jpeg?auto=compress&cs=tinysrgb&w=1600">
</div>
3条答案
按热度按时间xa9qqrwz1#
我不确定我是否完全理解你的问题,但从我所读到的,我认为你想增加图像,但保持图标之间的差距相同。不管你是否使用
flexboxes
。您可以在图像 Package 器上添加overflow: hidden
,而不是scaling
, Package 器会在 Package 器内放大图像。希望这对你有帮助。qjp7pelc2#
与其使用
transform
属性,我认为您需要使用width
和height
声明特定的维度。您可能还需要为Flexbox容器声明
align-items: center
。此外,您的宽度计算无效(因此被忽略),因为在减号
-
字符之后没有空格。而不是“100%负20像素”,你有“100%负20像素”。然而,“100% -20 px”会引入其他问题,所以我不会在我的回答中使用它。zf9nrax13#
问题是transform只在视觉上改变事物,而不是大小。
因此,此代码段更改悬停时的实际宽度和高度并转换它们。
它还将图像向上平移高度差的一半,但如果有多行图像,您必须决定这是否是您想要的效果,因为它不会上下移动行。