webkit-transform은 테두리 반경에 영향을줍니다.

Question

마우스를 가져 가면 이미지에서 CSS3 변환이 수행됩니다. 이 이미지의 테두리 반경은 애니메이션 후에 사라집니다 (Chrome의 경우).

<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

고정 여기

는 HTML입니다! 이 규칙을 .inner에 추가했습니다.

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