STYLE SHEETS

CSS3 Transform Property: the SkewY() Option

In this penultimate part of a series, I develop a basic example that shows how to easily distort the height attribute of an HTML element via the “skewY()” method provided by the “transform” CSS3 property. Similar to its cousins “skew()” and “skewX()” discussed in previous tutorials, the functionality offered by “skewY()” is pretty limited, at least when evaluated in production environments. This shouldn’t stop you from trying the method to see if it fits your requirements.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 2

November 01, 2010

TABLE OF CONTENTS:

If you’re in search of an approach that lets you apply some eye-catching effects to your web page elements without having to deal with the issues of client-side scripting, then you should look at the “transform” property. It's a cool feature bundled with the coming CSS3 specification that will permit you to transform (hence the property’s name) one or multiple HTML elements in all sorts of clever ways. These include rotating and scaling them, and even skewing their width and height attributes, similar to what you do when using an image editing program like Photoshop.

To demonstrate how easy it is to individually distort the attributes of a web page element, in the previous installment of the series I created an example. It made use of the “skewX()” method provided by the property to skew the width of the element in a snap. The entire process of transformation was as easy as assigning the distortion value in degrees to the method and nothing else. It really was that simple.

It’s fair to note, though, that “transform” supports another complementary method called “skewY().” As its name implies, it can also be used for distorting the dimensions of an element, but unlike its counterpart “skewX(),” this method alters an element's height. Since using the “skewY()” option is a straightforward process that you'll surely master in a snap, in this penultimate part of the series I’m going to build another basic example to demonstrate the actual functionality of this option when used in a concrete case.

Ready to continue your education on the “transform” CSS3 property? Then start reading right now!

Review: distorting an HTML element's width with the “skewX()” method

As I mentioned in the introduction, the “transform” property makes it really easy to distort the width of a selected HTML element by means of its “skewX()” method, which was covered in depth in the preceding installment of this series. If you've missed that tutorial, however, below I listed the example created then, which shows how to put the previous method to work with a simple div. Here’s the corresponding code sample:

<!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 'skewX()' 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: skewX(30deg);
    -moz-transform: skewX(30deg);
    -o-transform: skewX(30deg);
    transform: skewX(30deg);
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h1>Using the transform CSS3 property (with the 'skewX()' 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>

Without a doubt, understanding how the above “skewX()” method does its business is so simple that the process doesn’t bear any further explanation. Quite possibly, the most important thing that must be illustrated here is how the target div is rendered on screen, once the method has been applied to it. Hopefully, the following image will be of help in this case. Check it out:

Not too bad, huh? Considering that skewing the X axis of the div required only a single method call, the result is more than acceptable. Nonetheless, the earlier example would be somewhat incomplete if I didn’t show you how to create a similar transformation by using the complementary “skewY()” method referenced in the introduction. In line with this idea, in the following segment I’m going to create another example, which will show how to use that method with the same sample div that you saw before.

To learn how this example will be developed, click on the link below and keep reading.

Next: Using the skewY() method >>