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

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

CSS: Transitions and Transforms
Illustration by

Working in the z-index


From:

CSS: Transitions and Transforms

with Joseph Lowery

Video: Working in the z-index

You know how in 3D movies there's always something flying at the screen, like a twirling hatchet or an asteroid? In this movie I going to show you how to build a slideshow that tosses the current graphic right at the viewer and then displays the next image just like this. We'll use a combination of the 3D scale function and the keyframes statement covered in Chapter 3. I have the about.htm file from the Chapter 4/04_01/about folder open my code editor, along with a key CSS file we will be working with, transitions.css.

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

Working in the z-index

You know how in 3D movies there's always something flying at the screen, like a twirling hatchet or an asteroid? In this movie I going to show you how to build a slideshow that tosses the current graphic right at the viewer and then displays the next image just like this. We'll use a combination of the 3D scale function and the keyframes statement covered in Chapter 3. I have the about.htm file from the Chapter 4/04_01/about folder open my code editor, along with a key CSS file we will be working with, transitions.css.

I want to take a moment to show you the HTML structure before we start working with the CSS, however. The slideshow content starts at around line 50, so let's go there. Here you can see a number of nested div tags with a series of images right in the middle. The div tag with the class te-cover that's on line 59 holds the currently viewed image while the div tag with the classic te-front will hold the path to the image just transitioned and similarly, te-back, the path to the image ready to be transitioned. This is all handled through JavaScript.

All the JavaScript coding was put together by Pedro Botelho for Codrops, who has really done some fantastic trailblazing CSS work, especially with transitions and 2D and 3D transforms. We're ready to turn to the CSS. Here's my transitions.css file from the _css folder. Because we're going to be scaling in 3D, we will need to add the perspective class. In this situation we'll add it to a dynamically added class te-perspective, and we will use a value of 1000, so the image won't be distorted.

So I'm going to put that right up top, and again, perspective is given with a series of vendor prefixes that we can copy and paste and change the vendor prefix. Now we are ready to set up our @keyframes statements. We will use just two keyframes, one of the start, 0%, where we'll set the opacity to 1, and then another at the end, 100% where we will change the opacity to 0 and also use transform scale 3D to blow the image up 5 times its normal size.

Because we are fading out at the same time as scaling up, it will appear as if the image is coming right at us. We will need to write out vendor specific versions, as well as a standard CSS3 version, changing the transform-property as needed. Let's start off with the @webkit keyframes version. So @-webkit-keyframes and then the name of our animation, which I've named goBig, and as I said, we will start at 0% with an opacity set to 1, and at 100% level, we will set the opacity to 0.

And add another rule, -webkit-transform: scale3d and then the three values. Because we are expanding it in the X, Y, and Z dimensions, and for all of them were going to scale it up 5 times. Let's copy that entire rule and then paste it again, change -webkit to -moz in both places, paste one more time, paste again, change -webkit to -o for Opera.

And then one final paste where we have removed the vendor prefixes altogether. Next, we need to call our keyframes statements with the animation property, and at the same time, set the duration and easing. We will target the class that holds the front facing image during the transition, which is called te-front.

So let's enter in our vendor-specific webkit animation property first. We will name our animation, which is goBig. Let's set the duration for .4 seconds because we want this to happen pretty quickly, and let's use a kind of nonstandard timing function, ease-in-out. All right, looks good, we can copy that, paste in our 3 versions, and make our changes.

Next, let's add in the Backface Visibility hidden declaration to cut down on redraw errors that occurs in some older browsers. And once we have one, pretty use the copy and paste that. Finally, will add another 3D property, transform style, to the te-back class, which will also help to reduce redraw errors. And once we have the rule, let's do our by now a very familiar copy/paste routine. And we have one last property to add to this, and that is to set the z-index to 1.

Let's save our CSS page and then check out the new slideshow. I'll go to my about.htm file, reload the page, and then click Next Image. Sweet! Now you can add the 3D experience to your web pages without requiring special glasses. Best of all, browsers that can't handle 3D transforms will render a straightforward slideshow, displaying the content without the enhanced effect.

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

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.