使div在悬停时展开

Question

基本上，我只是想创建一个我悬停的 div 的“相对”放大。我尝试了以下方法，但输出是一场灾难。如有帮助，我们将不胜感激！

.item
{
    position: relative;
    display: inline-block;
    width: 20%;
    height: 100px;
    background-color: green;
    margin-right: 10px;
    transition: all 0.4s ease;
}

.item:hover
{
    transform: scale(1.5);
    margin-right: 40px;
    margin-left: 26px;
}

所需的解决方案：

*重要的是，我当前遇到的问题是在缩放时保持项目之间的填充。

链接到：JsFiddle

Answer 1

其他两个答案的问题是它们只能在静态视口中正常工作。这是一个更动态的解决方案：

.item
{
    position: relative;
    display: inline-block;
    width: 20%;
    height: 100px;
    background-color: green;
    margin-right: 10px;
    transition: all 0.4s ease;
}

.item:hover
{
    transform: scale(1.5);
    margin-right: 6%; /* fallback for ancient browsers that don't support calc() */
    margin-right: calc(5% + 10px);
    margin-left: 5%;
}

jsfiddle

Answer 2

只需调整边距，这似乎效果很好：

.item:hover
{
    transform: scale(1.5);
    margin-right: 54px;
    margin-left: 44px;
}

Answer 3

我认为如果不设置一个值就无法做到这一点。