How does one keep the drop-shadow anchored while an image rotates?

I've just begun using and understanding CSS. I've gotten along pretty well (although my CSS organization and condensing is pretty rough), and I've run into a few issues that I'm not sure how to resolve.

When using a drop shadow on a shaped PNG image, to give it a defined shadow. If I then animate that image in CSS, is there any way to keep the shadow in one place, still spinning with the image? As of right now the shadow spins around with the image.

Is there any way to fix this issue using CSS? or is it something I would have to do with another approach? This is part of the code I've been playing with:

@-webkit-keyframes spinTryAngle
{
	from 
	{
		-webkit-transform: rotate(0deg);
	}
	to 
	{
		-webkit-transform: rotate(359deg);
	}
}
img.one
{
	position: relative;
	left: 43px;
	display: block;
	
	-webkit-animation-name: spinTryAngle;
    -webkit-animation-duration: 950ms;
    -webkit-animation-iteration-count: 3;
    -webkit-animation-timing-function: ease-in-out;
	-webkit-animation-delay: 500ms;
	
    -webkit-filter: drop-shadow(10px 10px 5px rgba(0, 0, 0, .3));

}

Also, here is a JSFiddle link for what I'm talking about

Thanks for any and all help!

EDIT: Fixed the non working link

EDIT2: thanks to u/8bitsquid and u/ForScale for all assistance and ideas.

Updated JSFiddle: https://jsfiddle.net/o5u9yb30/5/