在悬停时使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

另外两个答案的问题是它们只能与静态视口一起正常工作。这是一个更动态的解决方案：

function startApp() {
  gapi.load('auth2', function() {
    gapi.client.load('plus','v1').then(function() {
      gapi.signin2.render('signin-button', {
          scope: 'https://www.googleapis.com/auth/plus.login',
          fetch_basic_profile: false });
      gapi.auth2.init({fetch_basic_profile: false,
          scope:'https://www.googleapis.com/auth/plus.login'}).then(
            function (){
              console.log('init');
              auth2 = gapi.auth2.getAuthInstance();
              auth2.isSignedIn.listen( function() {
                  console.log(auth2.currentUser.get());
                });
              auth2.then(function(resp){
                  console.log(auth2.currentUser.get());
                });
            });
    });
  });
}

jsfiddle

Answer 2

只需调整边距，这似乎运作良好：

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

Answer 3

我不认为你可以通过设置值来做到这一点。