Home arrow Style Sheets arrow CSS3 Animations: Rotating Web Page Elements
STYLE SHEETS

CSS3 Animations: Rotating Web Page Elements


This web development tutorial will showcase methods you can use to create dynamic, rotating web page elements (similar to what you can do with jQuery and other popular JavaScript frameworks) with a little simple CSS3 (cascading style sheets).

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 13
July 12, 2011
TABLE OF CONTENTS:
  1. · CSS3 Animations: Rotating Web Page Elements
  2. · Rotating HTML Elements with CSS3

print this article
SEARCH DEVARTICLES

CSS3 Animations: Rotating Web Page Elements
(Page 1 of 2 )

It’s not breaking news that CSS3 comes bundled with tons of exciting and handy features that were impossible to imagine only a few years ago. The arsenal that the specification includes under the hood is indeed wide and prolific; as you know, it is now possible to drop stylish shadows around text and boxes, specify the color of HTML elements along with their alpha transparency, and even create nifty rounded corners without having to use a single background image or piece of JavaScript.

That sounds quite impressive, but not shocking enough to make your head explode right? But what if I were to tell you that the standard will also let you add fairly complex animations to web page elements as if you were using jQuery or any other popular JavaScript framework? Even when implementations in most modern browsers are somewhat scarce and limited (at least at the time of this writing), the truth is that you can still spice up your web site with some astonishing animations by using only the functionality provided by CSS3.

IAt this point the question that probably will be spinning in your brain is: how can these animations be implemented from scratch? The specification includes a brand new property - not surprisingly called “animation” - which will let you accomplish this in a pretty straightforward fashion. Moreover, the whole process is as simple as specifying how the element will be animated, then the duration of the effect, and lastly, the number of iterations that the animation will perform. It's as easy as that.

Taking the First Step: Defining a Sample (X)HTML Document

Taking into account that my goal here is to show you how to animate an HTML element by using the “animation” CSS3 property, the first thing that needs to be done is to create a sample web page that can be used for testing the property in question.

Below I defined a basic - yet functional - web page, which includes a generic div identified as “spinning-element”. As the div’s “id” suggests, I plan to use the mentioned property for rotating the element on the web page a predefined number of times.

But I’m getting ahead of myself, since the details of this process will be covered later on. For now, focus your on this sample web page, whose structure is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Using CSS3 animations (rotating one time the target element)</title>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background-color: #fff;
    font: normal 0.9em Arial, Helvetica, sans-serif;
    color: #000;
}
h2 {
    margin: 0 0 10px 0;
    font-size: 2em;
    color: #585858; 
}
p {
    margin: 0 0 15px 0;
    line-height: 1.3em;
}
/* main wrapper */
#wrapper {
    width: 780px;
    margin: 0 auto;
    background-color: #fff;
}
/* header, main and footer elements */
#header, #main, #footer {
    padding: 20px;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h2>Header section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
    <div id="main">
        <div id="spinning-element">
            <p>This element is being animated with CSS3...</p>
        </div>
    </div>
    <div id="footer">
        <h2>Footer section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </div>
</div>
</body>
</html> 

Admittedly, there’s not much that can be said with reference to the above (X)HTML document, except that it defines the target div mentioned a moment ago. In a typical situation, if you ever needed to apply some form of animation to this element, the process would be tackled with JavaScript. Thanks to the existence of the “animation” property, however, this can now be achieved by means of a pure CSS-based approach.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials