Black_Star,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#field {
position: relative;
width: 600px;
height: 600px;
border: 1px solid black;
background-color: red;
}
#bigBlock {
position: relative;
width: 500px;
height: 500px;
border: 1px solid black;
margin-top: 5%;
margin-left: 5%;
/*background: url("snowboarder-400x385.png") 50% 50% no-repeat;*/
}
.block {
position: absolute;
border: 3px solid white;
-webkit-box-shadow: -10px 17px 25px 11px rgba(0, 0, 0, 0.6);
-moz-box-shadow: -10px 17px 25px 11px rgba(0, 0, 0, 0.6);
box-shadow: -10px 17px 25px 11px rgba(0, 0, 0, 0.6);
transform-origin: center;
transition: all .8s ease-in-out;
}
.picture2 {
}
#bigBlock div:nth-child(1) {
width: 45%;
height: 20%;
top: 76%;
left: 38%;
background-color: #ED5A00;
background-position: -165px -295px;
z-index: 7;
}
#bigBlock div:nth-child(2) {
width: 55%;
height: 25%;
top: 50%;
left: 5%;
background-color: #ED5A00;
background-position: 0px -170px;
z-index: 6;
}
#bigBlock div:nth-child(3) {
width: 20%;
height: 20%;
top: 30%;
left: 6%;
background-color: #ED5A00;
background-position: -5px -70px;
z-index: 5;
}
#bigBlock div:nth-child(4) {
width: 35%;
height: 20%;
top: 29%;
left: 27%;
background-color: #ED5A00;
background-position: -110px -70px;
z-index: 4;
}
#bigBlock div:nth-child(5) {
width: 15%;
height: 20%;
top: 27%;
left: 63%;
background-color: #ED5A00;
background-position: -292px -62px;
z-index: 3;
}
#bigBlock div:nth-child(6) {
width: 12%;
height: 10%;
top: 43%;
left: 79%;
background-color: #ED5A00;
background-position: -365px -135px;
z-index: 2;
}
#bigBlock div:nth-child(7) {
width: 35%;
height: 30%;
top: 0%;
left: 27%;
background-color: #ED5A00;
background-position: -110px 70px;
z-index: 1;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
[].forEach.call( document.querySelectorAll('.block'), function(el,i) {
var width = el.scrollWidth, height = el.scrollHeight;
el.style.transitionDelay = i + 's';
el.style.width = height+'px';
el.style.height = width+'px';
});
});
</script>
</head>
<body>
<div id="field">
<div id="bigBlock">
<div class="block picture2">1</div>
<div class="block picture2">2</div>
<div class="block picture2">3</div>
<div class="block picture2">4</div>
<div class="block picture2">5</div>
<div class="block picture2">6</div>
<div class="block picture2">7</div>
</div>
</div>
</body>
</html>