Join Joseph Lowery for an in-depth discussion in this video Automatically spinning logos, part of CSS: Transitions and Transforms.
That's fine for what it is, but let's bring it into the code editor and see how to breathe a little life into it. Now rather than rotate the logo like the hands of a clock, I would like the logo to spin like a weather vane. And that will require the RotateY function, which is 3D transform. To set that up, I will need to establish a perspective in the containing element, which happens to be in this case, outerWrapper. So we'll go to our outerWrapper rule here and add in -webkit-perspective and set that to a medium value 500px.
Now I am going to copy and paste my webkit perspective line, as we've done before. I will do it three times here, one for Mozilla, one for Opera, and one for the CSS3 Property perspective. All right, let's clean up that extra empty space there. And now let's define the transition in the logo rule. I am going to use the keyword all to cover any properties I need to control.
So -webkit-transition: all, and let's make this last a little bit. Let's bring it up to 2 seconds, and we will use the ease-timing function. Okay, so again, we will do a little copying and pasting, save some time, replace -webkit with -moz for Mozilla, and then we will take care of Opera and we'll get rid of -webkit altogether, so we just have transition.
Now we are going to need to add the transform to a hover state. Put in the basic selector logo and add hover. And let's set up our transforms, -webkit-transform, and as I said, we want this to rotate around the Y axis. So I will go rotateY, and let's have it go all the way around, so 360 degrees, or (360 deg).
Add in a semicolon, and we will copy that line, paste it three times, and do our little copy-paste dance. Okay, let's save it, and we will test the page. I will go over to Safari now, reload the page, and when I hover over the logo, it should spin. Okay, so there's my spinning logo, and when I hover out it reverses, just as you might expect. Well, the rotation is cool, but how can I be sure someone is going to hover over the logo? It would be much better to have it rotate automatically when the page loads.
And then I move my cursor past that opening and closing parenth, and enter it in a curly brace. I will hit Return once just to make a little space there. And let me go ahead and close off this function here with a semicolon before I add in the code that's to be executed, which in this case is going to be adding a class to the selector of ID logo or hash tag logo. So in jQuery we start off with a dollar sign and then opening and closing parenths, and within that, quotes.
And now add in our selector, which in this case is #logo. And then after the parenths we put a dot and add in the function, addClass, and again, open and closing parenth and quotes, and the class we are going to add is called animated. All right, let's put a semicolon after that. Now let's go down to the hover rule, and the first thing I am going to do is just copy it, because we are going to be able to reuse it.
I don't want to lose this in case I want to go back to it. So I will copy it, and now I am going to comment it out by putting a /* above it, and a */ below it, creating a new line, and then pasting it back in. Now we are going to change the selector from #logo:hover to .animated, and while we are at, why don't we beef it up a bit? Instead of just doing one rotation, let's do two, and let's have it spin the opposite way.
So to do all of that, all I need to do is to change the 360 degrees to a -720. All right, we will do that three times more. And since we beefed that up, why don't we beef up the transition as well? Since we have two rotations, let's make it go 3 seconds instead of 2, and let's go for a custom timing function. Instead of ease, let's use cubic-Bezier to create one that starts out really slow, and then just takes off.
So we replace ease with cubic-Bezier, and open and closing parenth, and in that four number values (0.950, 0.050,) that's the first of two X/Y coordinate pairs. So let's enter the second ones now, 0.795, and finally 0.035.
Okay, let's copy our changes and then replace the existing code with the new super-duper code. Finally, let's add a brief delay so that the animation doesn't start immediately after the page load, but waits just 1 second. So in the Logo rule, we will add in our transition-delay property starting with the webkit version. And there it is, the code hints. So let's take advantage of that, and we will make this 1s for 1 second.
And now let's do our other versions by copying and pasting that in several times and then changing the prefixes where we need to. All right, great! Let's save the page, head back over to Safari. I'm going to refresh the page, and let's see what happens. Excellent, looks pretty sweet! We have got a nice delay there and then the logo just goes crazy, but in a very precise, controlled way. CSS transitions and transforms like this 3D rotation work really well for bringing simple eye-catching animations to banners and other ads.
- Understanding transition basics
- Working with 2D and 3D transforms
- Animating color changes
- Fading objects
- Changing the size of page elements and fonts
- Transitioning multiple properties at the same time
- Understanding keyframes and animations
- Working in the z-index
- Crafting transitions in Dreamweaver