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.
By default all transforms use a center origin, and that means that all scaling, rotating, skewing, and transitioning that you're going to be doing to your elements will transform from the center point of that element. Now for many transformations, that'll probably be all you need. However there are going be times when your design requires the transformation to expand or rotate in a different direction or with a different set point. Now to do that we're going to need to set a transform-origin, which is something we are going to do to the thumbnails in our gallery.
So I have the gallery.htm. We are also be working with the main.css file, which is in the _css folder of the same directory. Speaking of that I am going to switch over to my main.css and I am going to scroll all the way down to line 937. And this is where our thumb hover is set to. Now you will notice a little bit of a change from our last exercise. Instead of having all those skewing and rotating combined together, we are going to just be doing rotating initially. Now the reason that we are going to start with rotation is because it's one of the easiest things to sort of see transform-origin's in action.
Let me show you what I mean. If I preview this in the browser notice as I hover over this, they are just rotating around that center point. So the center stays in exact same spot and it just rotates around that center point. Now let's set a transform-origin to a different position and see how that is going to work. So I will go down to the next line and I am going to type in -moz-transform-origin. Now I am going to set that to left top. Now you can use several different units of measurement here.
I could use pixels if I wanted to be precise. I could also use percentages if I wanted to go 20% over and 20% down, but the keywords are typically what you are going to be using for the bulk of your transform-origin's. This is going to set that transform point to the left top. Okay, so now that I've got that. I am going to go ahead and copy this, paste it a couple of times so that I don't have to type, and we are just going to do webkit and we will remove the vendor prefix for the last one there. So save that. We will now preview this.
And now as I hover over these, notice that I am actually transforming them from that top left-hand point. So much so that if I mouse over here I have hard time staying over it. Now that's a nice little user experience lesson for you. You will need to be very careful about transforming them if you are responding to user interaction, out of where the user is interacting with them to begin with. Okay, fantastic. Let's just kind of play around with some of the other values to see what they would do for us. Instead of left top, let's change it to right bottom. You will notice that the order of the keywords is typically horizontal and then vertical.
You can feel free to move those around if you would like. I'd just like to keep them consistent with what the specification is asking for. But if you did bottom right, browsers would know what you were talking about. Okay, so save that, preview that again, and we get exactly the behavior that we were sort of anticipating. It just sort of swings up from the bottom. Cool! So now that we have a handle on this, let's do a more practical example if you don't mind. I am going to change the transform itself to a scale.
I am going to do 1.5. So I will copy that. Paste that in those three positions. And then I am also going to change the transform-origin as well, change it from right bottom to center bottom. It should transform these straight up, basically keeping the bottom edge in place. So if I save this and test it, sure enough that's exactly what it's doing. So it's transforming from the center outward, but notice that that bottom edge is staying right in place.
That's really cool. Now this would be nice if I had a series of tabs or something like this but I don't like this functionality here. I would prefer it, if maybe the thumbnails went down as they scale. Remember later on, from the gallery that we previewed earlier, remember the thumbnails sort of extend downward. So that's what we are going to do. We are just going to reverse the order. So I am going to go back in, change the scale to 1.3, and you will see why I am doing that in just a moment, and I am going to change bottom to top. So we can make some really important changes to our transforms very quickly. Save that, test it.
And now we get the behavior that we've kind of saw earlier when we previewed our finished gallery. There is a little bit more to do. But notice how the thumbnails are pretty much going down to the very, very edge of that. 1.32 will make them go all the way down to the edge. That wasn't any math I did. That was just called trial and error. But that is definitely what we will be doing a little bit later on. So you are seeing a very practical example of using transforms in a way that creates a more engaging user experience. Now transform-origin, the property where we are just using, it's going to give us a lot more control over how transforms occur and what other elements or areas are impacted by it.
Now remember that in addition to the keyword values that we were using here, you can also use percentages or length values for more precise control over those origin points. Okay, so now that we have our thumbnails transforming the way we want them to, we are going to explore transitions in our next movie, so that we can then learn how to animate that transformation.
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.