具有border-radius的CSS3缩放动画

Question

我需要一种在border-radius的div中使用CSS3制作缩放动画的方法。但正如您在下面看到的那样，它并不能很好地运作：

工作代码：https://jsfiddle.net/n5owxmch/

CSS：

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.item {
  position: relative;
  border-radius: 10px;
  border: 1px solid #333;
  margin: 2%;
  overflow: hidden;
  width: 540px;
}
.item img {
  max-width: 100%;

  -moz-transition: all 21s;
  -webkit-transition: all 21s;
  transition: all 21s;
}
.item:hover img {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

HTML：

<div class="item">
  <img src="https://scontent.cdninstagram.com/t51.2885-15/s600x600/e35/17661731_634657496725091_8999479055321399296_n.jpg" alt="pepsi" width="540" height="548">

  <div class="item-overlay top"></div>
</div>

有没有办法解决这个问题？

Answer 1

根据我的研究，我只是在Chrome中重现了这一点（ Edge和Firefox工作正常）。为了解决这个问题，我为z-index添加了border-radius和供应商前缀，如下所示。

通过添加.item对z-index: 100;进行优先排序，并使用z-index: 0;对图像进行优先级排序。基本上这会强制图像在.item。

之下

我为-moz-添加了供应商前缀（-webkit-和border-radius）：

  -moz-border-radius:10px; /* add this */
  -webkit-border-radius: 10px; /* add this */

请参阅代码段：

＆＃13;

＆＃13;

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.item {
  z-index: 100; /* add this */
  position: relative;
  
  -moz-border-radius:10px; /* add this */
  -webkit-border-radius: 10px; /* add this */
  border-radius: 10px;
  border: 1px solid #333;
  margin: 2%;
  overflow: hidden;
  width: 540px;
}
.item img {
  max-width: 100%;
  z-index: 0; /* add this */
  -moz-transition: all 2s;
  -webkit-transition: all 2s;
  transition: all 2s;
}
.item:hover img {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

＆＃13;

<div class="item">
  <img src="https://scontent.cdninstagram.com/t51.2885-15/s600x600/e35/17661731_634657496725091_8999479055321399296_n.jpg" alt="pepsi" width="540" height="548">

  <div class="item-overlay top"></div>
</div>

＆＃13;

＆＃13;

＆＃13;