Getting Fancy - Jump Start CSS - page 136

with what syntax, refer to Can I use... , which is an online searchable reference with support
tables for all sorts of HTML, CSS, and JavaScript features.
It's also worth checking out a website called Prefixr, created by Jeffrey Way, which lets you
paste all your CSS into a text field and then generate all the necessary vendor prefixes to get
the code working in as many browsers as possible. Remember to back up original code be-
fore committing to anything that modifies it automatically like this.
So, for the remainder of this topic, we will be using only the standard syntax for all the code.
If something isn't working, check the Can I use... website to see if it's a browser support or
vendor prefix issue that's the culprit. Failing that, try putting the code into Prefixr and then
use whatever output it provides instead.
Transforms
In this next section, we're going to talk about a CSS feature that's quite complementary to
transitions: CSS transforms. Transforms use the transform property along with a number
of different transform functions to alter the look and/or position of elements on the page in
various ways. A transform looks like this:
.example {
transform: rotate(180deg);
}
The function used in that example is the rotate() function. Let's briefly cover functions
available for use with transforms.
translate
The translate() function works much like the position property. Using it, or the related
translateX() and translateY() , you can move an element along the x and y axes.
So if we had a box on the page that we wanted to move 20px to the left and 30px down from
its original position, we could enter the following: