How to use CSS3 to animate parts of an image

Question

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

The fact is that although I know how to use CSS3 3D3 transforms to rotate something, I don’t know how to animate the “parts” of an image. In the link above, the script seems to somehow "cut" the image into several parts, and then animate them separately. However, the image was not cut in advance - it is one whole image.

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

Answer 1

Looking at the source code of the plugin, I see that it really slices the image and rotates each part individually. It creates slices and hides the original before the animation and shows the new original and destroys the fragments immediately after the animation.

Here is one way to crop the 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 

Answer 2

Well, the functionality of this plugin is pretty simple:

You have images in an unordered list. As soon as you activate the change, the following will happen.

An overlay is created

A div containing 5 other divs - slices.

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

These fragments contain several divs that form a cubic view with the images you want to move as background images (showing only the corresponding part).

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

Now for each of the cells a timeout is set (with a slightly different length), using the actual CSS transition (180 ° rotation) to rotate to a new image.

Answer 3

CSS3 animation is a change in the CSS attributes of a single DOM Node over time. Thus, you can technically not animate parts of the image — or, for that matter, change the attributes of a specific regional area of ​​the DOM element. So what you need to do, there are actually several DOM elements, each of which represents a single fragment.

One way to do the same is to have a div for each fragment with the image set as the background. Each div of a predetermined size, placed side by side, will have a background image positioned so that they merge to form the entire image.

Now you can animate each such div using css animation. If you are going to use javascript, then there is no need for the server to display all of these div elements. In fact, creating div-s for slicing and setting background positions can be done using javascript.

Answer 4

I do a spinner and instead of making separate images in Photoshop or wherever I set a radial background gradient over the image using the selector :before

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

allows the center of the duplicate below to show (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 many ways to “crop” all images by simply changing the margins, etc., and allowing the parts to show selectively.

SVG images are also good for animating, and classes can be assigned to individual sections and thus animated with CSS transitions. There are a lot of similar CSS tricks on this site, if you give it Google ( it will remind).