<h1>3D image rotator</h1> 
<div>
<div class = "square"><img src="https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"></div>
</div>
body{
  font-family: 'Courier New', Courier, monospace;
  overflow: hidden;
  background-color: antiquewhite;
}
h1{
  font-size: 2rem;
  text-align: center;
  color: black;
  box-shadow: 2px 2px white;
  
}
div {
	perspective: 500px;	
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}
img{
	width:400px;
	height:400px;
}
.square {
	width: 400px;
	height: 400px;
  margin-bottom:120px;
	background: grey;
	transform: rotateY(45deg);
	animation: rotateAnimation 1s linear infinite;
}

@keyframes rotateAnimation {
	from {transform: rotateY(45deg);}
	to {transform: rotateY(225deg);}
}
@media screen and  (max-width:900px){
	img{
    width:200px;
    height: 200px;
  }
  .square{
		width:200px;
		height:200px;
		background: grey;
		transform: rotateY(45deg);
		animation: rotateAnimation 1s linear infinite;
		
	}
}
@media screen and  (max-width:600px){
	img{
    width:100px;
    height:100px;
  }
  .square{
		width:100px;
		height:100px;
		background: grey;
		transform: rotateY(45deg);
		animation: rotateAnimation 1s linear infinite;
		
	}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.