Home arrow Style Sheets arrow CSS3 Transform Property: Chaining Multiple Effects
STYLE SHEETS

CSS3 Transform Property: Chaining Multiple Effects


In this final part of an eight-part series on CSS3's transform property, you'll learn how to build "chains" of transformations by assigning multiple effects to a single HTML element.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 1
November 03, 2010
TABLE OF CONTENTS:
  1. · CSS3 Transform Property: Chaining Multiple Effects
  2. · Chaining multiple effects in a single declaration

print this article
SEARCH DEVARTICLES

CSS3 Transform Property: Chaining Multiple Effects
(Page 1 of 2 )

It seems that the release of the CSS3 specification is just around the corner, and there's no better time than now to start exploring some of the new features that it includes. Of course, you may argue that I'm being overly optimistic if I think you'll actually get to use them soon, since numerous incompatibilities exist between some modern browser vendors (feel free to name them), which still cause  headaches for many web designers.

While admittedly you have the right to think that, the truth is that currently most browsers do support the specification at least partially, albeit at different levels and in many cases through proprietary implementations. This shouldn't stop you, however, from taking a peek at a few handy CSS3 properties to see what they can do for you, right? Well, that's exactly the case with "transform," a helpful property that allows you to apply behavioral effects to web page elements, such as rotations, movements and distortions, without the need to write a single line of JavaScript.

If you've already read all of the previous tutorials of this series, you're already familiar with each effect supported by "transform." In those articles I covered each of them from a practical point of view. Despite this, the property has an additional, hidden ability which hasn't been discussed so far, and deserves a closer look, since it reveals the property's full potential.

Yes, as this article's title suggests, it's possible to assign multiple effects to a single HTML element, in this way making it easy to build "chains" of transformations on the fly, pretty similar to what you can do with a programming language that supports fluent interfaces. Since creating chained effects with the "transform" property reveals its true power, in this final part of the series I'm going to discuss how to accomplish this, as usual via a hands-on example which you'll be able to tweak at will.

Ready to tackle the last chapter of this (hopefully) educational exploration of the "transform" CSS3 property? Then begin reading!

Distorting the height of an HTML element: a brief review of the "skewY()" method

As usual, before I start demonstrating how easy it is to assign multiple transformational effects to a single HTML element, I'd like to spend a few minutes reintroducing the example created in the previous episode of the series. It showed how to use the "scaleY()" method included with the "transform" property, in this case for distorting the height of a generic web page container.

Having clarified that, here's the code snippet that puts the aforementioned method in action. Check it out:

<!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 the transform CSS3 property (with the 'skewY()' option)</title>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background: #ddd;
    font: 0.8em Arial, Helvetica, sans-serif;
    color: #585858;
}
#wrapper {
    width: 960px;
    margin: 0 auto;
    background: #fff;
}
#header, #content, #footer {
    padding: 20px;
}
#sample_div {
    width: 350px;
    padding: 20px;
    background: #00f;
    color: #fff;
    border: 1px solid #fff;
    -webkit-transform: skewY(30deg);
    -moz-transform: skewY(30deg);
    -o-transform: skewY(30deg);
    transform: skewY(30deg);
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h1>Using the transform CSS3 property (with the 'skewY()' option)</h1>
        <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. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p>
    </div>
    <div id="content">
        <h2>Main content section</h2>
        <div id="sample_div">
            <h3>Subheading section</h3>
            <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.</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. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p>
    </div>
</div>
</body>
</html>

From the previous example, it's clear to see that implementing the "scaleY()" method is a straightforward process. In this case, the method has been assigned a distortion value of 30 degrees, which produces the following result when applied to the target div:

Admittedly, skewing an HTML element by altering individually (or in conjunction) its width and height attributes isn't the most useful thing that can be done with the "transform" property. Nevertheless, the process leads me directly to the topic mentioned in the introduction, which is much more interesting. As you'll recall, the property lets you chain multiple effects into a single declaration. That sounds pretty appealing, right?

So, assuming that you're interested in learning how to accomplish this task, in the next section I'm going to build a new example that will sequentially scale and rotate the same sample div that you saw before.

To see the full details of this chaining process, click on the following link and keep reading. 


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