How to use CSS3 to animate parts of an image

Problem

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!

Problem courtesy of: Sang Froid

Solution

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
Solution courtesy of: Jan Dvorak

Discussion

CSS3 animation is all about altering the CSS attributes of a single DOM Node over time. So you can technically not animate parts of an image - or for that matter change attributes of a specific regional area of a DOM element. So what you have to do is actually have multiple DOM elements each representing a single slice.

One way to do the same would be to have a div for each slice with the image set as background. Each div of pre-specified size laid side-by-side would have the background image positioned in such a manner that they would combine to form the whole image.

Now you can animate each such div by using css animations. If you intend to use javascript, then it is not necessary to have the server render all these div elements. In fact creation of the div-s per-slice and setting background positions can be done by javascript.

Discussion courtesy of: lorefnon

Well, the functionality from this plugin is pretty easy:

You have your images in an unordered list. As soon as you trigger the change, the following happens.

A div overlay is being created, containing 5 other divs - the slices.

+----+----+----+----+----+
|    |    |    |    |    |
|    |    |    |    |    |
| 1  | 2  | 3  | 4  | 5  |
|    |    |    |    |    |
|    |    |    |    |    |
+----+----+----+----+----+

These slices contain several divs that form a cubical with the images which you want to transition set as background images (showing only the according part of it).

            +---+\
  Slice 1:  |\  | \
  Image     | \_|__\
  currently | | |  |
  shown   ->| |_|__|
            | / |  /
            |/  | /<- Image to transition to
            +---+/

Now for each of the cubicles a timeout (with slightly different length) is set, using an actual CSS-Transition (180° rotate) to rotate to the new image.

Discussion courtesy of: Christoph

I'm making a spinner and rather than making individual images in Photoshop or wherever I'm setting a radial background gradient over the image with the :before selector

-webkit-radial-gradient(center, ellipse cover, #fff 23%,transparent 27%,transparent 100%)

allowing the center of a duplicate below to show through (not animated), which is positioned by duplicating the img element and setting its position identical to the existing one using Javascript

function spinBadge() {
    hovered = document.querySelector('a:hover img')
    spinner = document.createElement('img');
    spinner.src = hovered.src;
    spinner.className = 'spinner';
    spinner.setAttribute('width','120px');
    spinner.setAttribute('height','120px');
    spinner.setAttribute('style','border:0; margin:0; max-width: none; position: absolute; pointer-events: none; left: '+hovered.offsetLeft+'px; top: '+hovered.offsetTop+'px;');
    hovered.parentNode.appendChild(spinner);
    setTimeout(function(){document.querySelector('.spinner').className = 'spinner wheee'})
    setTimeout(function(){document.querySelector('.wheee').remove();},3000);
}

There are plenty of ways to 'slice' whole images up by just changing margins etc. and letting parts show through selectively.

SVG images are also nice for animation, and individual sections can be given classes and thus animated with CSS transitions. There's plenty on this site and the likes of CSS-tricks if you give it a Google (this springs to mind).

Discussion courtesy of: Louis Maddox

This recipe can be found in it's original form on Stack Over Flow.