/*  Code By Webdevtrick ( https://webdevtrick.com )  */
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

* {
	box-sizing: border-box;
}

body {
	background-color: #FFF;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	margin: 0;
	perspective: 1000px;
}

.slider {
	position: relative;
	height: 400px;
	width: 400px;
  	transform-style: preserve-3d;
	animation: rotate 10s linear infinite;
}

.slide {
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}

.slide.visible {
	opacity: 1;
}

@keyframes rotate {
	0% {
		transform: rotateY(-90deg);
	}
	
	47%, 53% {
		transform: rotateY(-270deg);
	}
	
	94%, 100% {
		transform: rotateY(-450deg);
	}
}

.slide img {
	object-fit: cover;
	height: 100%;
	width: 100%;
}

@media screen and (max-width: 500px) {
	.slider {
		height: 280px;
		width: 280px;
	}
}