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>