Name of Page

Death Race Cube

Only works in Chrome and Safari

This awesome cube with video was created using CSS3 transforms, transitions and the HTML5 video tag. The effect requires only 16 lines of HTML5 and 75 lines of CSS3.

A feature of css3 I confirmed when doing this exercise is, anything you put in a div tag automatically takes on the transform and transitions properties applied to the div. So, for example, the text that reads "Mouse Over the Video" is automatically taking on the skewX, skewY, rotation and scale values that I wrote to define the div that creates the outside wall of the cube. This, in theory, applies to almost any element (images, video, etc...) you put in a styled div. Thats a big time-saver. Thanks CSS3.

Greatness number 2; the -webkit-box-reflect style attribute. Now, using a few lines of CSS3, you can add a fully animated and realistic reflection to any element. The video reflection was created with the following code;

-webkit-box-reflect:below 1px
-webkit-gradient(linear, left top, left bottom, from(transparent),
color-stop(0.66, transparent), to(white));