CSS масштаб преобразования с переходом игнорирует клип-путь

Question

Хотя transfom происходит, то clip-path, кажется, игнорируется:

var zoom = false; 
 

 
setInterval(function(){ 
 

 
    if(zoom == false) { 
 
    zoom = true; 
 
    $('.circle').attr('class','circle zoom'); 
 
    } 
 
    else { 
 
    \t $('.circle').attr('class','circle'); 
 
    zoom = false; 
 
    } 
 
},1000);

.wrapper { 
 
    display:inline-block; 
 
    
 
    -webkit-clip-path: circle(120px at center); 
 
    clip-path: circle(120px at center); 
 
} 
 

 
.zoom { 
 
    transform: scale(1.1); 
 
} 
 

 
.circle{ 
 
    display:block; 
 
    
 
    transition: all .2s ease-in-out; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <img src="//placehold.it/300" alt="" class="circle"> 
 
</div>

Кто-нибудь знает, почему это, и как это предотвратить ?

Answer 1

Место клип-путь к кругу круга, а не обертка.

var zoom = false; 
 

 
setInterval(function(){ 
 

 
    if(zoom == false) { 
 
    zoom = true; 
 
    $('.circle').addClass('zoom'); 
 
    } 
 
    else { 
 
    \t $('.circle').removeClass('zoom'); 
 
    zoom = false; 
 
    } 
 
},1000);

.zoom { 
 
    transform: scale(1.1); 
 
} 
 

 
.circle{ 
 
    display:block; 
 
    transition: all .2s ease-in-out; 
 
    -webkit-clip-path: circle(120px at center); 
 
    clip-path: circle(120px at center); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img src="//placehold.it/300" alt="" class="circle">