<div class="frame">
  <div class="center">
    
		<div class="card card-1">
			<div class="top"></div>
			<div class="content">
				<div class="line" style="width: 104px"></div>
				<div class="line" style="width: 112px"></div>
				<div class="line" style="width: 97px"></div>
				<div class="line" style="width: 108px"></div>
				<div class="line" style="width: 52px"></div>	
			</div>
		</div>
		
		<div class="card card-2">
			<div class="top"></div>
			<div class="content">
				<div class="line" style="width: 98px"></div>
				<div class="line" style="width: 106px"></div>
				<div class="line" style="width: 111px"></div>
				<div class="line" style="width: 103px"></div>
				<div class="line" style="width: 81px"></div>	
			</div>
		</div>
		
		<div class="card card-3">
			<div class="top"></div>
			<div class="content">
				<div class="line" style="width: 112px"></div>
				<div class="line" style="width: 103px"></div>
				<div class="line" style="width: 92px"></div>
				<div class="line" style="width: 108px"></div>
				<div class="line" style="width: 67px"></div>	
			</div>
		</div>
		
  </div>
</div>

@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);

.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 1px 2px 10px 0px rgba(0,0,0,0.3);
	overflow: hidden;
  background: #5A717B;
  color: #fff;
	font-family: 'Open Sans', Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.center {
  position: absolute;
	height: 130px;
	width: 400px;
  top: 135px;
  left: 0;
	transform: perspective(60px);
	transform-style: preserve-3d;
}

.card {
	position: absolute;
	width: 140px;
	height: 130px;
	top: 0;
	left: 130px;
	background: #fff;
	border-radius: 3px;
	overflow: auto;
	box-shadow: 4px 8px 12px 0px rgba(0,0,0,0.2);
	
	.top {
		width: 100%;
		height: 30px;
		background: #FF9800;
	}
	
	.content {
		padding: 17px 14px;
	}
	
	.line {
		height: 4px;
		background: #E9E9E9;
		margin-bottom: 6px;
	}
	
}

.card-1 {
	animation: switch-1 5s ease-in-out infinite both;	
}
.card-2 {
	animation: switch-2 5s ease-in-out infinite both;	
}
.card-3 {
	animation: switch-3 5s ease-in-out infinite both;	
}

@keyframes switch-1 {
	0%, 100% {
		transform: translate3d(0,0,0);
		box-shadow: 4px 8px 12px 0px rgba(0,0,0,0.2);
	}
	33.33% {
		transform: translate3d(145px,0,-45px);
		box-shadow: 2px 4px 6px 0px rgba(0,0,0,0.2);
	}
	66.66% {
		transform: translate3d(-145px,0,-45px);
		box-shadow: 2px 4px 6px 0px rgba(0,0,0,0.2);
	}
}

@keyframes switch-2 {
	0%, 100% {
		transform: translate3d(145px,0,-45px);
		box-shadow: 2px 4px 6px 0px rgba(0,0,0,0.2);
	}
	33.33% {
		transform: translate3d(-145px,0,-45px);
		box-shadow: 2px 4px 6px 0px rgba(0,0,0,0.2);
	}
	66.66% {
		transform: translate3d(0,0,0);
		box-shadow: 4px 8px 12px 0px rgba(0,0,0,0.2);
	}
}

@keyframes switch-3 {
	0%, 100% {
		transform: translate3d(-145px,0,-45px);
		box-shadow: 2px 4px 6px 0px rgba(0,0,0,0.2);
	}
	33.33% {
		transform: translate3d(0,0,0);
		box-shadow: 4px 8px 12px 0px rgba(0,0,0,0.2);
	}
	66.66% {
		transform: translate3d(145px,0,-45px);
		box-shadow: 2px 4px 6px 0px rgba(0,0,0,0.2);
	}
}