How to use CSS3 to animate parts of an image

Posted by Sang Froid on Stack Overflow See other posts from Stack Overflow or by Sang Froid
Published on 2012-10-27T16:09:47Z Indexed on 2012/10/27 17:01 UTC
Read the original article Hit count: 188

Filed under:

css3

|

animation

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!

© Stack Overflow or respective owner

Related posts about css3

A Few of My Favorite HTML5 and CSS3 Online Tools

as seen on ASP.net Weblogs - Search for 'ASP.net Weblogs'
I really enjoy coding up HTML5, CSS3, and JavaScript applications but there are some things that I’m better off writing with the help of a development tool. For example, CSS3 gradients aren’t exactly the most fun thing to write by hand and the same could be said for animations, transforms, or styles… >>> More
CSS3 - Validator - RGBA wrong?

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm using the W3C CSS Validator with the Profile CSS3 but the validator says that my CSS rgba()'s are wrong. I looked up the Color Module Level 3, and the syntax is the same as mine. I also tried the Dev-Validator, same result. Example input: div.class { border: 1px solid rgba(0, 0, 0, 0.5); } Am… >>> More
CSS3 webkit fading in a tooltip.

as seen on Stack Overflow - Search for 'Stack Overflow'
HI, I've just been experimenting with a CSS tooltip that fades in with CSS3's transitions. I've got it working up to a point, but for some reason, when I hover over where it's meant to be, it activates, even though it's positioned left:-999px;. So basically, what am I doing wrong/is what I was… >>> More
Poll: CSS3 color transparency

as seen on Stack Overflow - Search for 'Stack Overflow'
Many of you already know that you can express colors in your stylesheets like: color: #FFF; color: #FFFFFF; color: rgb(255,255,255); color: hsl(100%,100%,100%); and that you can use rgba() and hsla() to express color transparency. Do you think it would be a good idea to be able to express color… >>> More
Webkit CSS3 for Mozilla

as seen on Stack Overflow - Search for 'Stack Overflow'
What is the equivalent of -webkit-transition: opacity 0.6s linear; in -moz? I tried replacing -webkit with -moz but nothing happened. I even tried extending it to -moz-transition-property/duration but with no success. >>> More

Related posts about animation

jerky animation using Core Animation

as seen on Stack Overflow - Search for 'Stack Overflow'
In my iPhone app, I am trying to get some red and white stripes that are scrolling across the screen to animate smoothly when the speed of the stripes gets high. In my app the user starts the animation and changes the scrolling speed by a finger swipe and changes the width of the stripes by a two… >>> More
Trigerring other animation after first ending Animation (Objetive-C)

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, I have a simple animation which simply modify the position of a button: [UIView beginAnimation:nil context:nil]; [UIView setAnimationsDuration:3.0]; [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut]; mybutton.frame = CGREctMake(20, 233, 280, 46); [UIView commitAnimations]; I want to… >>> More
how to import mesh animation from cinema4d into blender ?

as seen on Super User - Search for 'Super User'
I need to import a mesh animation from Cinema4D into Blender. I tried to do that using Collada.The Collada 1.3 importer doesn't seem to do anything, the Collada 1.4 importer seems to work, but the animation didn't get imported into Blender. After reading this post, I tried modifying the animation… >>> More
Making a ViewFlipper like the Home Screen using MotionEvent.ACTION_MOVE

as seen on Stack Overflow - Search for 'Stack Overflow'
Ok I have a ViewFlipper with three LinearLayouts nested inside it. It defaults to showing the first one. This code: // Assumptions in my Activity class: // oldTouchValue is a float // vf is my view flipper @Override public boolean onTouchEvent(MotionEvent touchEvent) { switch (touchEvent.getAction())… >>> More
How to Animate Text and Objects in PowerPoint 2010

as seen on How to geek - Search for 'How to geek'
Are you looking for an eye catching way to keep your audience interested in your PowerPoint presentations? Today we’ll take a look at how to add animation effects to objects in PowerPoint 2010. Select the object you wish to animate and then click the More button in the Animation group of the Animation… >>> More