FtMocks

Lets split and assemble Emma Watson image with CSS3. This article is based on background-image CSS property. In the below example we are going make image into 4*4 parts and make it into one.

DEMO - Split and Assemble Image with CSS3

.slice {
  width:150px;
  height:150px;
  background-size:600px 600px;
  background-repeat:no-repeat;
}

Observe the above CSS. "slice" is one part of an image and it represents 100*100 part of 400*400.  

Markup :

<div class="slice" id="slice1"></div>
<div class="slice" id="slice2"></div>
<div class="slice" id="slice3"></div>
<div class="slice" id="slice4"></div>
<div class="slice" id="slice5"></div>
<div class="slice" id="slice6"></div>
<div class="slice" id="slice7"></div>
<div class="slice" id="slice8"></div>
<div class="slice" id="slice9"></div>
<div class="slice" id="slice10"></div>
<div class="slice" id="slice11"></div>
<div class="slice" id="slice12"></div>
<div class="slice" id="slice13"></div>
<div class="slice" id="slice14"></div>
<div class="slice" id="slice15"></div>
<div class="slice" id="slice16"></div>

CSS :

.slice {
  width:100px;
  height:100px;
  border:1px solid #ccc;
  position:absolute;
  background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2e73Uu_GMYTwJTEpsqq4HYC7cA91ARUSFJe-kVHDhutt3IiYTiA-mCr6eieCcFsCSqjFeAngIjRV2R9gcXUTMHXL6Ps7VLb8RpTmRRzz1gesK3kKmIq6v8BXxQ1UWD9bbxjnZpIw7jHE/w728-h408-no/emma.jpg");
  background-size:400px 400px;
  background-repeat:no-repeat;
  background-attachment:fixed;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: linear;
 -webkit-animation-duration: 6s;
 -webkit-animation-direction: normal;
}

#slice1 {
  -webkit-animation-name: ani1;   
}

#slice2 {
  -webkit-animation-name: ani2;   
}

#slice3 {
  -webkit-animation-name: ani3;   
}

#slice4 {
  -webkit-animation-name: ani4;   
}

#slice5 {
  -webkit-animation-name: ani5;   
}

#slice6 {
  -webkit-animation-name: ani6;   
}

#slice7 {
  -webkit-animation-name: ani7;   
}

#slice8 {
  -webkit-animation-name: ani8;   
}

#slice9 {
  -webkit-animation-name: ani9;   
}

#slice10 {
  -webkit-animation-name: ani10;   
}

#slice11 {
  -webkit-animation-name: ani11;   
}

#slice12 {
  -webkit-animation-name: ani12;   
}

#slice13 {
  -webkit-animation-name: ani13;   
}

#slice14 {
  -webkit-animation-name: ani14;   
}

#slice15 {
  -webkit-animation-name: ani15;   
}

#slice16 {
  -webkit-animation-name: ani16;   
}

@-webkit-keyframes ani1 {
0% {
    left:150px;
    top:150px;
    background-position:0px 0px; 
  } 
100% {
    left:0px;
    top:0px;
  }
}

@-webkit-keyframes ani2 {
0% {
    left:150px;
    top:150px;
    background-position:100px 0px; 
  } 
100% {
    left:100px;
    top:0px;
  }
}


@-webkit-keyframes ani3 {
0% {
    left:150px;
    top:150px;
    background-position:200px 0px; 
  } 
100% {
    left:200px;
    top:0px;
  }
}

@-webkit-keyframes ani4 {
0% {
    left:150px;
    top:150px;
    background-position:300px 0px; 
  } 
100% {
    left:300px;
    top:0px;
  }
}

@-webkit-keyframes ani5 {
0% {
    left:150px;
    top:150px;
    background-position:0px 100px; 
  } 
100% {
    left:0px;
    top:100px;
  }
}

@-webkit-keyframes ani6 {
0% {
    left:150px;
    top:150px;
    background-position:100px 100px; 
  } 
100% {
    left:100px;
    top:100px;
  }
}

@-webkit-keyframes ani7 {
0% {
    left:150px;
    top:150px;
    background-position:200px 100px; 
  } 
100% {
    left:200px;
    top:100px;
  }
}

@-webkit-keyframes ani8 {
0% {
    left:150px;
    top:150px;
    background-position:300px 100px; 
  } 
100% {
    left:300px;
    top:100px;
  }
}

@-webkit-keyframes ani9 {
0% {
    left:150px;
    top:150px;
    background-position:0px 200px; 
  } 
100% {
    left:0px;
    top:200px;
  }
}

@-webkit-keyframes ani10 {
0% {
    left:150px;
    top:150px;
    background-position:100px 200px; 
  } 
100% {
    left:100px;
    top:200px;
  }
}

@-webkit-keyframes ani11 {
0% {
    left:150px;
    top:150px;
    background-position:200px 200px; 
  } 
100% {
    left:200px;
    top:200px;
  }
}

@-webkit-keyframes ani12 {
0% {
    left:150px;
    top:150px;
    background-position:300px 200px; 
  } 
100% {
    left:300px;
    top:200px;
  }
}

@-webkit-keyframes ani13 {
0% {
    left:150px;
    top:150px;
    background-position:0px 300px; 
  } 
100% {
    left:0px;
    top:300px;
  }
}

@-webkit-keyframes ani14 {
0% {
    left:150px;
    top:150px;
    background-position:100px 300px; 
  } 
100% {
    left:100px;
    top:300px;
  }
}

@-webkit-keyframes ani15 {
0% {
    left:150px;
    top:150px;
    background-position:200px 300px; 
  } 
100% {
    left:200px;
    top:300px;
  }
}

@-webkit-keyframes ani16 {
0% {
    left:150px;
    top:150px;
    background-position:300px 300px; 
  } 
100% {
    left:300px;
    top:300px;
  }
}