Rotating gear with 3D effect CSS snippet

html{
scroll-behavior: smooth;
will-change: transform;
}
:root{
--top: 0.05rem;
--left: 0.06rem;
}
			
.cd-gear-container{
width: 6rem;
height: 6rem;
}
.cd-spin {
position: relative; 
transform-style: preserve-3d;
transform:skew(175deg, 0deg); 
transform-origin: 50% 50%;
}
.cd-gear-container img {
position: absolute; 
animation: spin 15s infinite steps(600,end);
will-change: transform;
transform: translateZ(0);
} 

.cd-gear-container img:nth-child(1) {
top:var(--top);
left:var(--left);
z-index:1;
}
.cd-gear-container img:nth-child(2) {
top:calc(2 * var(--top));
left:calc(2 * var(--left));
z-index:2;
}
.cd-gear-container img:nth-child(3) {
top:calc(3 * var(--top));
left:calc(3 * var(--left));
z-index:3;
}
.cd-gear-container img:nth-child(4) {
top:calc(4 * var(--top));
left:calc(4 * var(--left));
z-index:4;
}
.cd-gear-container img:nth-child(5) {
top:calc(5 * var(--top));
left:calc(5 * var(--left));
z-index:5;
}
.cd-gear-container img:nth-child(6) {
top:calc(6 * var(--top));
left:calc(6 * var(--left));
z-index:6;
}
.cd-gear-container img:nth-child(7) {
top:calc(7 * var(--top));
left:calc(7 * var(--left));
z-index:7;
}
.cd-gear-container img:nth-child(8) {
top:calc(8 * var(--top));
left:calc(8 * var(--left));
z-index:8;
}
.cd-gear-container img:nth-child(9) {
top:calc(9 * var(--top));
left:calc(9 * var(--left));
z-index:9;
}
.cd-gear-container img:nth-child(10) {
top:calc(10 * var(--top));
left:calc(10 * var(--left));
z-index:10;
}
			
@keyframes spin{
0%{transform: rotate(0deg);}
100%{transform: rotate(360deg) ;}
}

<div class="cd-gear-container" >
<div class="cd-spin">
	<img src="gear-12.svg">
	<img src="gear-11.svg">
	<img src="gear-10.svg">
	<img src="gear-9.svg">
	<img src="gear-8.svg">
	<img src="gear-7.svg">
	<img src="gear-6.svg">
	<img src="gear-5.svg">
	<img src="gear-7.svg">
	<img src="gear-1.svg">
</div>
</div>