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.
.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://lh5.googleusercontent.com/-vHa-zuitOKY/UvZxDfazxEI/AAAAAAAAARk/q9fa6WbWy9Q/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;
  }
}

3 comments:

  1. Split and assemble image with CSS3. I want to explore more related fields where it become professional when you start to do your work in same resembeling https://essayreviewuniverce.com/customwritings-review/ fields. What things are needed to understand and then start to earn money.

    ReplyDelete
  2. This is quite a good blog.Are you also searching for DNP Capstone Project? we are the best solution for you. We are best known for delivering nursing writing services to students without having to break the bank.

    ReplyDelete
  3. Your blogs are great.Are you also searching for Nursing Writing Help? we are the best solution for you. We are best known for delivering nursing writing services to students without having to break the bank.

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts