Animating the image cube


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

Animating the image cube

In the previous movie, creating an image cube, we set up the initial CSS rules necessary for transforming--there's that word again--two-dimensional pictures into a three-dimensional cube. In this movie we're going to add the necessary JavaScript and CSS3 rules to make it interactive. First, let's bring in our JavaScript helpers. In all there are three files we're going to link to. Let's start with Modernizer, the excellent library that makes it easy to detect the CSS browser support on the function by function basis.

So right after the second link tag that links our CSS Transition file, we'll add in the script tag, set the type to text/javascript, and source will set to the _scripts folder, and within that, modernizr 2.5.3.min.js. Let's close out the script tag, and we'll go to our next line.

Next I'm going to link to a series of utilities, put together by David DeSandro whose Tutorial on 3D cubes was the basis for this implementation. Again, the script, type text...

Animating the image cube
Video duration: 6m 44s 2h 25m Intermediate

Viewers:

Animating the image cube 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 ...