HTML and CSS Reference
In-Depth Information
chapter
twelve
Adding 2D Transforms
IN THIS CHAPTER,
you leave behind older browsers and make use of one of CSS3's most exciting features, trans-
forms, which let you move, rotate, and scale elements, among other manipulations.
Project files update (ch12-00): If you haven't followed the previous instructions and are comfortable working from
here onward or would like to reference the project files up to this point, you can download them from
Safely Using Experimental CSS3 Properties
Because all the CSS features explained in this chapter are from the CSS3 specification, they are unsup-
ported in Internet Explorer 6, 7, and 8. Likewise, 3D transforms, transitions, and animations described in Chapters 13
and 14 are also unsupported in these browsers, as well as Internet Explorer 9. They do however have good support in
Internet Explorer 10 and other major browsers.
Although these CSS3 properties are “experimental” and a part of Working Draft modules, they have been implemen-
ted in modern browsers for some time, and are actually close to being safe enough to use without prefixes. At the time
of writing though, these properties should be used with prefixes, so you'll learn to do just that—the most future proof
way to use the latest CSS3 features.
Because I am creating the Cool Shoes & Socks page in Google Chrome, I use the
-webkit-
prefix. If you are using
a different browser, replace the
-webkit-
prefix with your browser's prefix:
•
-webkit-
for Google Chrome and Apple Safari
•
-moz-
for Mozilla Firefox
•
-o-
for Opera
•
-ms-
for Microsoft Internet Explorer
In Chapter 15, you use a tool that adds the missing prefixes to your stylesheet so that the Cool Shoes & Socks page
works across all browsers.
transform and 2D Transform Functions
