coin spin monolith

HTML

<button onclick="rotatecoins(20, '.block')">Spin</button>
<div class="block"></div>

CSS

.block{
height:200px;
    width:100px;
    background:black;
    position:relative;
    
    margin: 20px auto; 

}

.drehen{
  background-image:'https://caffeine-extension.de/myplugins/donations/img/gold-coin-small.png!important';
    position:absolute;
    height:20px;
    width:20px;
    border-radius:20px;
    z-index:-1;
    opacity:0;

 -webkit-animation-name: drehen;
 -webkit-animation-duration: .75s;
 -webkit-animation-iteration-count: 1;
 -webkit-animation-direction: forwards;
 -webkit-animation-timing-function: linear;
 -webkit-animation-fill-mode: forwards;
}



@-webkit-keyframes drehen {
    0%   { -webkit-transform: translate3d(0px,0px,0) scale(0.5); z-index:-1;  opacity:1;}
    25% { -webkit-transform: translate3d(-150px,7px,0) scale(1); z-index:0; }
    50%   { -webkit-transform: translate3d(0px,17px,0) scale(1.5); z-index:1; }
    75%   { -webkit-transform: translate3d(150px,7px,0) scale(1); z-index:0; }
    100% { -webkit-transform: translate3d(0px,0px,0) scale(0.5); z-index:-1;  opacity:1;}

}

JavaScript

function rotatecoins(num, target){
    
    $.each($(target), function(j,v){
        
        var b = $(v);
        var wrap = $('<div>').addClass('drehenhalter').css({
            'position':'absolute',
            'height': b.height(),
            'width': b.width(),
            'top': b.offset().top,
            'left': b.offset().left});
                           
                           b.before(wrap);
    
    for(var i = 0; i < num; i++){
    
        wrap.append($('<div>').addClass('drehen').css({
            'top':(Math.random() * (wrap.height() - 40)) + 10,
            'left': wrap.width() /2,
            '-webkit-animation-delay': Math.random() * 3000 + 'ms', '-webkit-animation-duration': ((Math.random() * 1000) + 1000 ) + 'ms'
        }).bind('webkitAnimationEnd',function(){
$(this).remove();            
        }));       
    
    }
        });


}