New Feature: Playlist Center! Pick a topic and let our playlists guide the way—like a learning mixtape.

Start learning with our library of video tutorials taught by experts. Get started

CSS: Transitions and Transforms
Illustration by
Watching:

Automatically spinning logos


From:

CSS: Transitions and Transforms

with Joseph Lowery

Video: Automatically spinning logos

Let's face it, there is pretty much only one reason to spin anything on the page, and that's to attract attention. And there is nothing wrong with that when used judiciously. In this movie we will take a banner ad and apply the CSS Transform/Rotate function along with a little bit of JavaScript to capture some eyeballs when the page first loads. Now I have opened here advert.htm from the Chapter 2/02_04 folder. And you can see it's a pretty standard static banner.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
CSS: Transitions and Transforms
2h 25m Intermediate Jul 11, 2012

Viewers: in countries Watching now:

With robust and ever-increasing browser support, it is now possible to take advantage of expressive CSS3 capabilities across modern browsers. In this course, Joseph Lowery explores the possibilities of the new coding options, which animate well over 50 different properties automatically or interactively, and how they open the door to enhanced user experiences. This course covers the range from simple to complex transitions, including 2D and 3D transforms, and illustrates how transitions are expedited in various web authoring tools, as well as Dreamweaver. The course also contains a start-to-finish interactive slideshow project that allows you to practice and see the transitions and transforms immediately in action.

Topics include:
  • 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
  • Adding JavaScript interactivity
  • Crafting transitions in Dreamweaver
Subjects:
Web Web Design Web Development
Software:
CSS
Author:
Joseph Lowery

Automatically spinning logos

Let's face it, there is pretty much only one reason to spin anything on the page, and that's to attract attention. And there is nothing wrong with that when used judiciously. In this movie we will take a banner ad and apply the CSS Transform/Rotate function along with a little bit of JavaScript to capture some eyeballs when the page first loads. Now I have opened here advert.htm from the Chapter 2/02_04 folder. And you can see it's a pretty standard static banner.

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 for that, because CSS is a presentation layer and not a functionality layer, we need to add a little JavaScript. So let's head back to the code editor. And above my Style tag, I am going to add in a Script tag to link to the most current version of jQuery. So it's script and the type is text/javascript. Now the source of this, I happen to know is http://code.jquery.com/jquery.min.js, .min for minified.

Now, let me close off the script tag, and that's all good to go. And now let's add in our jQuery function. So for that we need another script tag, with a type of text/javascript, and we will make little room. And we will use the jQuery Ready function before it executes whatever is inside. So in jQuery, you start off with the dollar sign and then here we will put in document in parentheses, followed by a period, and the function ready.

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.

There are currently no FAQs about CSS: Transitions and Transforms.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS: Transitions and Transforms.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.