使用变换和三次贝塞尔展开选项卡

Question

试图写出更好的问题，所以在这里。

我有 5 个选项卡可以工作，在悬停时放大。如何在悬停之前去除选项卡之间的空间，使选项卡彼此相邻？

我已经尝试了我所知道的一切并研究了它，但我仍然无法弄清楚。

选项卡是轮播 http://digidonkey.net/dev/上方的颜色框

这是我的 css：

.nav.nav-justified > li > a > img { 
    max-width: 100%; 
    opacity: 1;
    -webkit-transform: scale(.9,.9);
            transform: scale(.9,.9);
    -webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.nav.nav-justified > li.active > a > img,
.nav.nav-justified > li:hover > a > img,
.nav.nav-justified > li:focus > a > img { 
     opacity: 1; 
    -webkit-transform: none;
            transform: none;
    -webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.tab-pane .tab-inner { padding: 30px 0 20px; }
.tab-li-a {padding:0 !important;}

Answer 1

这有效

.nav.nav-justified > li > a > img { 
transition: all .2s ease-in-out;
}
.nav.nav-justified > li.active > a > img,
.nav.nav-justified > li:hover > a > img,
.nav.nav-justified > li:focus > a > img { 
    transform: scale(1.1);
    margin-right:31px;
}

Answer 2

进行以下更改，它将提供所需的输出。

.nav.nav-justified > li > a > img {
    max-width: 100%;
    opacity: 1;
    /* -webkit-transform: scale(.9,.9); */
    /* transform: scale(.9,.9); */
    /* -webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275); */
    /* transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275); */
}