DIV CSS缩放转换模糊和shakey

Question

无论我尝试什么，我都无法获得我正在扩展的DIV的漂亮转场。

https://jsfiddle.net/ugoqrap6/7/

transform: translate3d(0,0,0); 
backface-visibility: hidden; 

我一直想很多差异的建议，但没有人似乎有所作为。

Answer 1

你可以使用transform: scale(1.2);

我在这里做一个简单的例子，因为有很多其他的东西，在你的代码怎么回事，这应该更容易为未来的读者

正如其他人所指出的那样，注意展开图像。

ul { 
 
    padding: 0; 
 
    margin: 50px 20px; 
 
    list-style: none; 
 
} 
 
ul li { 
 
    margin: 5px; 
 
    display: inline-block; 
 
} 
 
ul li a { 
 
    padding: 5px; 
 
    display: inline-block; 
 
} 
 
ul li a img { 
 
    width: 125px; 
 
    height: 125px; 
 
    display: block; 
 
} 
 
ul li a:hover img { 
 
    transform: scale(1.2); 
 
    transition: transform 0.5s ease; 
 
}

<ul> 
 
    <li><a href="#"><img src="http://aspublic.blob.core.windows.net/drupal-files/bubble_bobble.jpg"></a></li> 
 
    <li><a href="#"><img src="http://aspublic.blob.core.windows.net/drupal-files/bubble_bobble.jpg"></a></li> 
 
    <li><a href="#"><img src="http://aspublic.blob.core.windows.net/drupal-files/bubble_bobble.jpg"></a></li> 
 
</ul>

Answer 2

这里是一个jQuery选择，它简单地淡出，所以你避免拉伸动画。

$('.thumb').mouseenter(function() { 
 
    $(this).fadeTo(200, 0, function() { 
 
    $(this).css("transform", "scale(1.2)"); 
 
    $(this).fadeTo(500, 1); 
 
    }); 
 
}) 
 

 
$('.thumb').mouseleave(function() { 
 
    $(this).fadeTo(200, 0, function() { 
 
    $(this).css("transform", "scale(1)"); 
 
    $(this).fadeTo(500, 1); 
 
    }); 
 
})

ul { 
 
    padding: 0; 
 
    margin: 50px 20px; 
 
    list-style: none; 
 
} 
 
ul li { 
 
    margin: 5px; 
 
    display: inline-block; 
 
} 
 
ul li a { 
 
    padding: 5px; 
 
    display: inline-block; 
 
} 
 
ul li a img { 
 
    width: 125px; 
 
    height: 125px; 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<ul> 
 
    <li> 
 
    <a href="#"> 
 
     <img class="thumb" src="http://aspublic.blob.core.windows.net/drupal-files/bubble_bobble.jpg"> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"> 
 
     <img class="thumb" src="http://aspublic.blob.core.windows.net/drupal-files/bubble_bobble.jpg"> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"> 
 
     <img class="thumb" src="http://aspublic.blob.core.windows.net/drupal-files/bubble_bobble.jpg"> 
 
    </a> 
 
    </li> 
 
</ul>