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选项，它会暂时淡出，以避免拉伸动画。

＆＃13;

＆＃13;

$('.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);
  });
})

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;