*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;

}

.page{	
		
	align-items: center;
	justify-content: center;
	
}

.slider{
    margin-left: 600px;
	position: relative;
	width: 200px;
	height: 200px;
	transform-style: preserve-3d;
	animation: rotate 30s linear infinite;

	

}


@keyframes rotate{

	0%{
		transform: perspective(1000px) rotateY(0deg);
	}

	100%{
		transform: perspective(1000px) rotateY(360deg);
	}

}

.slider span {
	display: flex;
	justify-content: center;
	position: absolute;
	top: 30px;
	left: 0;
	width: 100%;
	height: 100%;
	transform-origin: center;
	transform-style: preserve-3d;
	transform: rotateY(calc(var(--i)*45deg)) translateZ(350px);
}

.slider span img{
	display: flex;
	justify-content: center;
	position: absolute;
	top: 30px;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 100px;
	object-fit: cover;
	transition: 2s;

}

.slider span:hover img{

	transform: translate(-50px) scale(1.2);
}