@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

img{
	width: 320px;
	height: 200px;
	position: absolute;
}
.container{
	width: 350px;
	height: 200px;
	position: relative;
	margin-top: 15%;
	margin-left: 40%;
	perspective: 1000px;
	transform-style: preserve-3d;
	transform: rotateX(-10deg) rotateZ(-10deg);
	animation: ror 20s linear infinite;
}
@keyframes ror{
	50%{
		transform: rotateX(30deg);
	}
	80%{
		transform: rotateX(-30deg);
	}
}
.images{
	width: 100%;
	position: absolute;
	transform-style: preserve-3d;
	animation: rotate 20s linear infinite;
}
@keyframes rotate{
	from{

	}
	to{
		transform: rotateY(360deg);
	}
}
img:nth-child(1){
	transform: rotateY(60deg) translateZ(300px);
}
img:nth-child(2){
	transform: rotateY(120deg) translateZ(300px);
}
img:nth-child(3){
	transform: rotateY(180deg) translateZ(300px);
}
img:nth-child(4){
	transform: rotateY(240deg) translateZ(300px);
}
img:nth-child(5){
	transform: rotateY(300deg) translateZ(300px);
}
img:nth-child(6){
	transform: rotateY(360deg) translateZ(300px);
}
img:nth-child(1){
	transform: rotateY(420deg) translateZ(300px);
}
img:nth-child(8){
	transform: rotateY(480deg) translateZ(300px);
}
img:nth-child(9){
	transform: rotateY(540deg) translateZ(300px);
}
img:nth-child(10){
	transform: rotateY(600deg) translateZ(300px);
}
img:nth-child(11){
	transform: rotateY(660deg) translateZ(300px);
}
img:hover{
	width: 340px;
	height: 220px;
	cursor: pointer;
}