20 Amazing CSS3 Examples

In my last article, 4 simple CSS3 animation tutorials I had shown you some simple tutorials using CSS3 transforms to create some basic animations. This time I will be showing you some of the top CSS3 examples and animations. You will be able to truly see the capabilities that come with CSS3 and some really awesome animations built by extremely talented web developers.

To view these demos click on the image links. Most of these animations are built using webkits so it is preferred if you view them in the latest versions of Safari or Chrome.

1. Turning Coke Can

When I first saw this animation, I thought it was pretty neat and then I realized that the whole can was built using CSS and that just blew my mind! Check it out for yourself (make sure you scroll horizontally).

2. Rotating Cube Using The Arrow Keys

This awesome rotating cube is built using CSS and allows you to move it using your arrow keys.

3. CSS3 3D Meninas

This CSS3 animation is a classic painting which turns 3D as you hover over using the pseudo/parallax effect. Built using pure CSS and HTMl.

4. The MAC OS Dock

This is a cool CSS3 example of the MAC OS dock. Works in Safari 4 and Chrome 5

5. Text Shadow Box

Check out this awesome Text Shadow property effect, hover over the text to get a neat shadow effect.

6. jQuery and CSS3 DJ Hero

This is a jQuery and CSS3 Disk Jockey set. You can control the speed of each disc with your mouse or the buttons. Take a look at this inspiring CSS3 demo.

7. Awesome Rotating Photo Gallery

This is a CSS3 example using transitions and transforms to create a nice rotating photo gallery.

8. AT-AT Walker

Pure CSS3 AT-AT walker. For the star wars fans lol.

9. Star Wars Opening Text

Another one for the Star Wars fans, the opening text using CSS and HTML for the Star Wars trilogy.

10. CSS3 Sphere

A great animation made by the same developer who created the cube controlled by the arrow keys. This time a sphere that can be moved with a mouse click or arrow keys.

11. 3D City

Check out this rotating 3D city built using CSS3 animations.

12. CSS3 Holographic Box

Have a look at this holographic box built using CSS3. Hover your mouse over the box to get a cool 3D effect.

13. CSS3 Scrolling Effects

These are a few CSS3 scrolling effects. Scroll through the examples to reveal the neat effect used with CSS3.

14. CSS Zoetrope

This is truly an amazing animation, built using CSS a little HTML and some JavaScript. You can adjust the image of the animation, the speed, scale and background.

15. Madmanimation

This is unreal how amazing this is, built using HTML and CSS. One of my favorite animations, must of took some time. Press watch to view the video.

16. beta.theexpressiveweb.com

This is another CSS3 website, but the part I want to showcase is the CSS animation that runs when you navigate to different pages on the website. Pretty awesome CSS animations.

17. Google CSS 3D Box Example

This is a 3D box that moves with your mouse. Make sure you type in the search box to see the next part of the effect.

18. CSS 3D Earth

CSS 3D Earth, built with CSS3 and some Javascript. Must see animation.

19. DOM Tree

A Rotating DOM Tree.

20. 3D Bouncing Ball With CSS3

Last but not least we have a 3D Bouncing Ball using CSS3.

Now you have 20 of my favorite CSS3 examples that are truly amazing, go ahead and share them with your friends!

Also, please subscribe to our blog newsletter if you wish to stay updated with the latest web trends and resources.

Author: Jake

Share This Post On