Question

我试图在鼠标悬停时对图像执行CSS3变换转换。此图像的边框半径在动画后消失（在Chrome中）。

这是html：

<div class="inner">
    <a class="imgLink" href="item.iframe.htm" target="_top">

        <img src="myimage.jpg" alt="">

        <span class="imgLinkOverlay">&nbsp;</span>

    </a>

</div>

和css：

.inner {
      margin: 0.75em;
      background: #FFF;
      border-radius: 10px;
      overflow: hidden;
      position: relative;
      zoom: 1;
    }

.imgLink img {
      width: 100%;
      display: block;
      position: relative;
      -webkit-transition: -webkit-transform 0.25s ease-in-out;
      transition: transform 0.25s ease-in-out;
    }


.imgLink:hover img {
      -webkit-transform: scale(1.2);
      -moz-transform: scale(1.2);
      -ms-transform: scale(1.2);
      transform: scale(1.2);
    }

在这里可以找到小提琴：http://jsfiddle.net/3x2ft/

Answer 1

固定！我将此规则添加到.inner：

-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

webkit-transform影响border-radius

1 个答案: