Creating an Impressive Product glass case with CSS3

impress.js could be a tiny, standalone library that produces it simple to style advanced CSS3 shows with attention-getting effects. however what if we tend to used impress.js for one thing aside from a presentation? this is often what we tend to do these days – we'll be spicing up a lucid recent product page with some CSS3 magic!

Using impress.js

With this little library, we will produce swish CSS3 transitions between the slides of our showcase. To do this, we've got to instruct impress.js on the way to orient the slides. this is often simple to try to to – we'll use knowledge attributes on the step dives. These attributes are translated into real CSS3 transformations by the library, reckoning on the present browser, and have an effect on the slide.
Impress.js supports variety of attributes:

    data-x, data-y, data-z can move the slide on the screen in 3D space;
    data-rotate, data-rotate-x, data-rotate-y rotate the part round the such that axis (in degrees);
    data-scale – enlarges or shrinks the slide.

The CSS3

To make the presentation work, we'll got to apply some CSS3 rules. the primary step is to vogue the presentation instrumentation and declare default styling for the slide parts.
assets/css/style.css

/*----------------------------
    Styling the presentation
-----------------------------*/

#impress:not(.impress-not-supported) .step{
    opacity:0.4;
}

#impress .step{
    width:700px;
    height: 600px;
    position:relative;
    margin:0 auto;

    -moz-transition:1s opacity;
    -webkit-transition:1s opacity;
    transition:1s opacity;
}

#impress .step.active{
    opacity:1;
}

#impress h2{
    font: normal 44px/1.5 'PT Sans Narrow', sans-serif;
    color:#444648;
    position:absolute;
    z-index:10;
}

#impress p{
    font: normal 18px/1.3 'Open Sans', sans-serif;
    color:#27333f;
    position:absolute;
    z-index:10;
}

#impress img{
    position:absolute;
    z-index:1;
}

As you'll see within the rules higher than, and within the HTML5 fragment within the starting of this tutorial, the #impress instrumentation is allotted a .impress-not-supported category. the category is removed providing the present browser supports the practicality needed for the library to run with success.