Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
In CSS3 First Look, staff author James Williamson provides an in-depth introduction to the newest CSS standard, detailing its modular format, history, and current level of browser support, while also demonstrating its capabilities and applications. The course includes tutorials on using new selectors, modifying typography and color, working with the box model, and understanding media queries. Exercise files accompany the course.
In this chapter, we're going to talk about some of the most eagerly anticipated CSS3 features of any module: transforms and transitions. The syntax behind these can get a bit complicated, especially at this stage of their support. However, their core functionality is actually pretty simple. Transforms allow us to rotate, scale, and offset our elements, while transitions allow us to animate element states including transforms. Now we'll talk about transitions in a moment but first I want to discuss transforms.
There are two types of transforms in CSS3: 2D and 3D. Three-dimensional transforms extend the 2D specification but rely heavily on it. For that reason, we'll focus on the 2D transforms, which allow transforms over the x and y axes first, and then cover 3D which has the z axis a little later on. Now first a word about syntax. In this overview, I am going to cover 2D transform syntax using the default specification syntax.
You'll notice however that when we do the example files a little bit later we'll be using the WebKit vendor prefix. This is because support for transform and transition is still in the early stage and of this recording WebKit is a little ahead in its implementation of the 2D and 3D specification. As always I recommend checking out specification for yourself to keep up with the latest developments. Okay, so with that out of the way, what is a transform? Well, if you're a graphic designer I'm betting you have been doing them manually for some time now. If you're not, the concepts are pretty easy to grasp.
Essentially transforms allow us to scale, skew, rotate, or translate an element, which is just another way of saying offset it. Now let's explore how this process works. To transform an object you use the transform property. This transform property can accept a list of transform functions. The functions are calculated by the browser and the transformation is applied. So what are the transform functions? Well we have rotate, scale, skew, and translate.
As you can see, several of the functions have variations that either limit the transform to an x or y axes or allows you to pass both axes values. Now rotate is a little different as it allows a single degree value. There is one other transform function you can pass in. There is a transform matrix that allows you to pass matrix values which can take the place of all the other transform functions. Now space and an unfortunate lack of math skills prevent me from going too deep into the matrix here, but if you're really interested you can check out the SVG specification and see how a transform matrix is calculated.
You can finally answer the question, what is the matrix? Now there is one more really handy thing that you can do to affect your transforms. You can set the transform-origin property to change the origin of an element's transformation. What does that mean? Well, by default transforms are applied with a center origin. If you were to scale or rotate an element for example, it would scale or rotate from the center of the object. You can use keywords to set the horizontal and vertical origins to the top, bottom, center, right, and left or you can use percentages to set horizontal and vertical values.
0 and 0 would set the origin in the top left, 50 and 50 would set it dead center, and 100-100 would place the origin at the bottom right. This gives you an amazing amount of control over your transforms and is something we'll experiment with a little later on. As I mentioned earlier, transforms don't enjoy widespread support just yet, although they are more common in the mobile environment where many apps take advantage of 2D and 3D transforms as part of their interface. Now currently 2D transforms are supported in Safari, Chrome, Firefox and Opera, but only through the use of vendor prefixes.
Be sure to research each of the vendor prefixes before using them as there might be slight differences in implementation. If you're interested in a pretty neat tool to help with your visual transforms, I recommend John Allsopp's CSS Sandbox. It allows you to play around with various transform functions and origins to see how your transforms are going to be performed. It even generates the code for you that you can use in your site. So that's pretty cool. So now that we have got the basics down, let's start exploring what we can do with transforms and we'll start in a very next movie.
Find answers to the most frequently asked questions about CSS3 First Look.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.