<div id="wrapper">
  
  <div class="dust"><img src="http://www.mattdrew.co.uk/experiments/images/ex-2point5d/dust.png" /></div>

<div class="foreground"><img src="http://www.mattdrew.co.uk/experiments/images/ex-2point5d/foreground.png" /></div>

<div class="midground"><img src="http://www.mattdrew.co.uk/experiments/images/ex-2point5d/midground.png" /></div>

<div class="background"><img src="http://www.mattdrew.co.uk/experiments/images/ex-2point5d/background.jpg" /></div>
</div><!--wrapper-->
/*Image source: https://2.bp.blogspot.com/--88HjYhJpJw/UZ5akPNgjLI/AAAAAAAAC0Y/Jt0_doM1dKY/s1600/Life%2Bin%2BWorld%2BWar%2BII%2B(4).jpeg*/

body {
  margin: 0px;
  background-color: #dbdbdb;
}
#wrapper {
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  position: relative;
  overflow: hidden;
  width: 379px;
  height: 568px;
  box-shadow: 0px 0px 30px 5px rgba(0,0,0,.3);
  transform: rotate(-2deg); 
  border: 10px solid #fff;
}

/********BACKGROUND********/
.background, .dust, .foreground, .midground  {
  position: absolute;
  margin-left: -80px;
  z-index: 1;
  animation-name: background;
  animation-duration: 40s;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}


@keyframes background {
  0% {transform:translateX(0px) translateY(0px);}
  100% {transform:translateX(-130px) translateY(0px);}

}
  
  
/********FOREGROUND********/  
  .foreground {
  z-index: 3;
  -moz-animation-name: foreground;
  -ms-animation-name: foreground;
  -o-animation-name: foreground;
  -webkit-animation-name: foreground;
  animation-name: foreground;
}

@keyframes foreground { 
  0% { transform: scale(1); }
  100% { transform: scale(1.2) translateX(-60px); filter: blur(10px); }
}


/********MIDGROUND********/
.midground {
  z-index:2;
  -moz-animation-name: midground;
  -ms-animation-name: midground;
  -o-animation-name: midground;
  -webkit-animation-name: midground;
  animation-name: midground;
}

@keyframes midground { 
  0% { transform: scale(1); }
  100% { transform: scale(1.4) translateX(-100px) translateY(0px) rotate(5deg); }
}



/********DUST********/
.dust {
  z-index: 4;
  -moz-animation-name: dust;
  -ms-animation-name: dust;
  -o-animation-name: dust;
  -webkit-animation-name: dust;
  animation-name: dust;
}
@keyframes dust { 
  0% { transform: scale(1); }
  100% { transform: scale(2) translateX(10px) translateY(0px); filter: blur(2px);}
}



/********TEMP PICTURE MASKS********/
.mask01, .mask02, .mask03, .mask04 {
  position: absolute;
  width: 100px;
  height: 600px;
  background-color: #000000;
  z-index: 1000;
}
.mask02{
  width: 100%;
  height: 30px;
}
.mask03{
  width: 3000px;
  height: 600px;
  margin-left: 500px;
}
.mask04{
  width: 100%;
  height: 300px;
  margin-top: 600px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.