Question

I’d like to create an image slider with some cool 3d effects, such as this one: http://tympanus.net/codrops/2011/09/05/slicebox-3d-image-slider/

The thing is, while I know how to use CSS3 3D transforms to rotate something, I don’t know how to animate “parts” of an image. In the link above, the script seems to somehow “slice” the image into several pieces, and then animate those separately. However, the image was not sliced up beforehand – it is one whole image.

Can anyone recommend any tutorials on how to achieve this effect, or perhaps just give the name of whatever technique was used to do this? Thank you in advance!

Answer 1

Looking at the plugin source code, I can see it indeed does slice up the image and rotate each part separately. It creates the slices and hides the original just before animating and shows the new original and destroys the slices just after animating.

Here is one way to slice up an image:

for each slice:
  create a new copy of the image
  place the image in a new div
  set the image `position` to `absolute` and `top` to minus the slice beginning
  set the div height to the slice height and `overflow` to `hidden`
  place the div to the correct position