Working in the z-index


show more Working in the z-index provides you with in-depth training on Web. Taught by Joseph Lowery as part of the CSS: Transitions and Transforms show less
please wait ...

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...

Working in the z-index
Video duration: 6m 20s 2h 25m Intermediate

Viewers:

Working in the z-index provides you with in-depth training on Web. Taught by Joseph Lowery as part of the CSS: Transitions and Transforms

Subject:
Web
Software:
CSS
Author:
please wait ...