<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.