Home / Articles / Adobe Dreamweaver / Using the Dreamweaver CS5 HTML5 Pack to Create CSS3 Transforms

Using the Dreamweaver CS5 HTML5 Pack to Create CSS3 Transforms

Article Description

By using CSS3 style sheets, you can apply some pretty cool visual effects to content in your web pages. David Karlins, author of Adobe Creative Suite 5 Web Premium How-Tos: Essential Techniques, shows how to work with a few of these effects in Dreamweaver CS5.
Overview of 2D Transforms

Overview of 2D Transforms

The 2D transforms include skew, rotate, translate, and scale. We'll examine each of these transforms, but aside from translate (which displaces an object up or down and/or right or left), the name describes the effect. You also can combine transforms. For example, you can skew content and scale it, to create an effect that is both skewed and stretched.

We'll define and apply 2D transforms as ID Div tags. A Div tag is basically a "blank" HTML element without any inherent properties; these tags are widely used as a formatting tool. The advantage of using ID styles rather than Class styles for web design is that you use an ID only once on a particular web page, whereas Class styles can be used repeatedly on a page.

To take advantage of Dreamweaver's ability to define some CSS rules without coding, the following recipes define the bulk of the IDs in the CSS Styles panel. Then we'll resort to coding in Dreamweaver's Split view, but we'll take advantage of code hints from the HTML5 Pack to make that process more intuitive and reduce the risk of coding errors.

4. Prerequisites | Next Section Previous Section