Home arrow Style Sheets arrow CSS3 Transform Property: Modifying Width and Height of an HTML Element
STYLE SHEETS

CSS3 Transform Property: Modifying Width and Height of an HTML Element


In this fourth part of a series, you will learn how to use the complementary “scaleX()” and “scaleY()” methods provided by the “transform” CSS3 property. They can be used for individually modifying the width and height attributes of an HTML element.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 7
October 19, 2010
TABLE OF CONTENTS:
  1. · CSS3 Transform Property: Modifying Width and Height of an HTML Element
  2. · Altering the width of an HTML element with the scaleX() method

print this article
SEARCH DEVARTICLES

CSS3 Transform Property: Modifying Width and Height of an HTML Element
(Page 1 of 2 )

“Transform” is a handy property bundled with the upcoming CSS3 specification which can be used for applying a number of predefined effects to one or multiple HTML elements without having to use any client-side scripting. Those transformational effects include, among other things, shifting elements horizontally and vertically across a web page, rotating them and even scaling them up and down.

Granted, achieving a cross-browser implementation of the transform property is still a somewhat frustrating process due to the limited support offered by some browser’s vendors. But the property is still a breeze to use, and its functionality allows you to chain several effects together through a single line of code. What else can you ask for?

Of course, the previous sentences would be mere marketing if I didn't demonstrate how useful the “transform” property can be when employed in some concrete cases. In keeping with this idea, in preceding installments of this series I developed a few contrived -- yet functional -- examples that showed how to use the property for modifying, in conjunction and individually, the X and Y coordinates of an HTML element. I also showed you  how to resize an HTML element via the property’s “scale()” method.

While “scale()” is one of the most useful methods that “transforms” provides, because it permits you to enlarge the width and height attributes of an element at the same time, it’s also possible to manipulate these attributes in a separate manner via a set of complementary methods called “scaleX()” and “scaleY()” respectively.

If you’re interested in learning how to work with the aforementioned methods, in this fourth tutorial of the series I’m going to create some approachable code samples. They'll help you to grasp their underlying logic in no time. So start reading now!

Altering the dimensions of an HTML element: a brief review of the “scale()” method

If you missed the previous installment of the series, where I explained how to change simultaneously the width and height of a web page element via the transform’s “scale()” method, don't worry. Below you'll find the example I developed then, which applies the corresponding transformation to a sample div. Here it is:

<!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 'scale()' 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: scale(1.2, 2);
    -moz-transform: scale(1.2, 2);
    -o-transform: scale(1.2, 2);
    transform: scale(1.2, 2);
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h1>Using the transform CSS3 property (with the 'scale()' 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 above example, it’s clear to see that the use of the “scale()” method is a straightforward process. In this particular case, the values passed to the method aren’t proportional, but in a typical use case they should be, to maintain the readability of the contents wrapped by the scaled element.

To complement the earlier example, below is an additional screen shot that shows how the previous div is rendered on the browser, after being properly resized:

Admittedly, the element looks pretty ugly and not very readable, but keep in mind that this has been done deliberately, so you can see more clearly how it’s possible to assign asymmetrical values to the element’s width and height attributes.

So far, so good. Now that you've learned how to use the “scale()” method supported by the “transform” property, it’s time to start discussing the complementary options mentioned in the introduction. Thus, in the following segment I’m going to explain how to modify only the width of the sample div that you saw before by means of the pertinent “scaleX()” method.

To see how this will be accomplished, simply jump forward and read the next few lines.


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-2014 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials