Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
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.
The CSS required to apply transforms is deceptively simple. In just a few lines of code, you can make dramatic changes to elements on the page. However, there are a few rules regarding how transforms are applied that you need to be aware of. We'll discuss those concerns, as well as explore the various options that we have when transforming elements as we begin to modify a photo gallery that will eventually use transforms and transitions to create a more compelling user experience. So just so you know where we are going to eventually end up, I want to show you the finished gallery first.
In this exercise, we're really just going to be experimenting with some transforms, but just so you have an idea as to what we are going to be doing is eventually our gallery will do this for us. So we are going to have some thumbnails that to do some transforms and some transitions to get a little bit more information about that particular photo, which is cool. Okay, so we'll get there eventually, but in this lesson remember we're just going to focus on experimenting a little bit with transforms. So of this exercise, I have the gallery.htm opened up and we'll be working on this file as well as the CSS.
Now, if I scroll down, I can find my gallery down here on the bottom and we are not going to spend a whole lot of time with this. I just want you to understand the structure. So the thumbnails are contained within a div tag with an ID of thumbStrip. Then the thumbnails themselves are in a div with a class of thumb. So that what we will be controlling as we write our selectors. So I'm going to switch over to the main.css file. Again, you can open that up separately or if you're using a program like Dreamweaver, you can just simply switch over. What I want to do is I want to scroll down to about line 937.
So I am going down towards the bottom there, there we go. I can find a couple of selectors in this area. One is the thumbnail itself and then the other one is a hover element. Now, I am going to apply the transforms to the hover pseudo-selector. Now why am I doing that? Well, I want us to be able to really see the difference between the pre-transform state and the transform state. You don't have to make user interactivity part of a transform, but it can be. In this case, I'm doing it on purpose, because I want us to see the before and after, and hover gives us a really nice ability to do that.
Okay, so here's what we are going to do. I'm going to place my cursor directly in the thumb:hover pseudo-selector and we're going to do our transform. So I'm going to do a Mozilla first, so moz-transform. And again, I mentioned that the syntax is just deceptively simple. We can pass a scale to it and we could scale that up by one-and-a-half times its current size. So all these transform functions you just pass in the value that they need. Some of them need lengths. Some of them need just multiples as we have in scale here, and some of them need degrees such as rotation and skew. So you have to know what they're looking for.
So we are going to go to WebKit here and then just the general generic transform as well. We are going to keep that syntax throughout the title. So I am going to go ahead and save that, preview that in any browser, Chrome. I'm going to keep with the WebKit browsers for these transforms, because again their implementations are a little further along. Now notice that when I hover over these images, they're scaling up. It really is that simple. That's pretty amazing. All right, let's take a look at some of the other transform functions that we can use. I am going to close this and go back into my code. I'm going to replace scale with rotate.
So I'm going to go ahead and rotate this and rotation requires degrees. So I'm going to pass 45 degrees in. Again, I'm a big fan of copying and pasting, so that I don't have to type that three times. There we go. Save that. I'm going to test it again. Now as I hover over them, they're rotating by 45 degrees. So you can really see the before and after with those. That's pretty cool. Let's keep going. Let's try some of the other ones. We're going to do skew next. Now skew, just like rotate, skew also requires degrees.
We are going to skew it maybe not quite as much. With skewing, I found a little goes a long way. By the way, I think I need to point out something here. When you rotate something, the degrees move it in a clockwise fashion, but when you skew something, the degrees move it in a counterclockwise fashion. So I'm going to save that, preview it, and notice that we get a little bit of skew action going on. You can see what I mean by a little goes a long way, as I hover over the thumbnails. Cool! One more transform function that we haven't tried yet, and that is translate. Translate is just another way of saying offset and there are various ways to do this.
You could, for example, use relative positioning and do an offset, but translate works really well. So with translate, you can pass multiple values. In this case, I'm going to pass 10 pixels and 10 pixels. Essentially, what that's going to do for me is it's going to move it 10 pixels over to the right and 10 pixels down. So again, I'm going to copy that, paste it a couple of times and I should be good to go. So we'll save that again, preview that in our browser and now we can see indeed, it's moving down and to the right. Cool! Now remember you can also, if you want to, a lot of these values such as skew and scale and translate, you can add on an X or a Y to those values to make sure that they're only happening along one axis.
Let me show you what I mean. I could change this one for example to translateY, and there's always a capital letter, X or Y. Then I only need to pass in one value. Positive values move me down the Y axis. Positive X values move me to the right. So again if I wanted to go up or to left, I would use negative values. Preview that again and now notice that it's only moving in one direction, which is really, really cool. You can also combine effects if you'd like. Now when you combine effects, there are a lot of things that you need to concern yourself with, but let's combine some effects first and then I'll talk about those.
So I am going to replace this translate. Actually you know what, I'll leave the translate on there. After the translate is over, I'll do a space. So these are not comma-separated; they're single spaced. I'll do scale, 1.5, then another space and then rotate that by about 15 degrees. So essentially, I'm just combining all of the effects together. I'm going to move it down by 10 pixels. I'm going to scale it by one-and-a-half times its normal size and then rotate it 15 degrees while I'm at it. So I'm just going to go ahead, copy that, and paste that and all of those, then we save that and test that again.
Now notice that we have multiple transformations applying to this. That's really cool. Nifty! Now when you apply those multiple transformations, you need to be really careful and let me show you why. First, let's say I do a skew and skew and rotate are the ones you really have to look out for. Let's say I skew something by 15 degrees and then I rotate it by 45 degrees. Again, I'm just going to copy this and paste it into the rest of these.
So these effects are basically applied in order. As they are applied in order, certain effects really matter where it comes in that stage. And let me show you what I mean. So here we're just seeing a rotation, but notice the skewing is having a very different effect. It's not really skewing it as much as it is basically just distorting the image to a new aspect ratio. On the other hand, watch what happens if we flip these. So let's say I take skew and place it on the other side of rotate. I'm just going to do that a couple of times.
All right, let's try that. I'm going to save that, preview it, and we can see we are getting a very, very different effect. So, the order in which you combine those effects together really matters. Remember they are going to be done in order. This one for example is rotating at first and then skewing the results, which gives you a very different result than skewing it first and then rotating the skew. So be really careful and aware of that as you are combining these guys together. As we've seen, they're very easy to apply.
We can combine multiple transforms and create these really complex transformations for elements on the page, but we do need to keep in mind when we combine those effects, the order in which we specify them can have really dramatic effects on the overall transformation. So you're going to want to test that early before using any type of a combination. So in our next movie, we're going to explore how to take even more control over our transforms through the use of transform-origin's.
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.