CSS3 is loaded with features, and it gives its users power across various categories. Two of those categories that are fun to experiment with are animation and images. Here are some of the top tutorials that will show you how to use CSS3 to create eye catching animations and image effects.
8 CSS3 Animation and Image Tutorials (Page 1 of 2 )
3D animation with pure CSS3
If you are looking to add a nice 3D effect to your site, this tutorial can help. It creates 3D animation using pure CSS3 that can really boost the overall look of a page. The example used for the demo involves movie posters, but it would probably look great on sites that focus on images or contain galleries of some sort. As you move your cursor over each element, it shifts to give you the desired 3D look.
The technique uses transform and transition, as well as the webkit perspective CSS property to create the effect. Unfortunately, the major drawback of the technique is that it only works on webkit based browsers, such as Chrome or Safari. If you do not use such a browser but want to see the effect in action, there's a demo video on the page that displays the animation.
Standard slideshows are a great way to display image galleries, as they allow for quick transitions from one image to another. This tutorial will show you how to take a standard slideshow and spice it up with a smooth rotating effect. As you click to view the next image in the slideshow, the current image will rotate in a seamless transition to the following one.
Both CSS3 and jQuery are used in this tutorial, and it's a solid pick for anyone with a website that has photo galleries, product pages, and more. The slideshow will be functional in any browser, but its full effects will only be experienced in browsers equipped with transformation support, such Chrome, Safari, and newer versions of Firefox.
How to create a simple, yet attractive image gallery with jQuery and CSS3
This tutorial was designed for someone who wants to make a basic image gallery with some extra flair thrown in. The gallery has a standard setup, with Polaroid style photos set in rows and columns. As you move your cursor over each photo, it pops off the page to give a 3D effect. It also rotates slightly to give the viewer a hint of animation. Clicking on the photo will cause it to expand to its full size.
Both jQuery and CSS3 are used to produce the gallery's desired effects. Also used in the technique are the transform and transition properties. Transform is used to rotate the images, while transition is used for the zooming.