Learn and share. The simplest harmony.

 

Showcase Product Feature in 3D Style

Posted on June 24, 2012 and got 4 shouts so far

Focus on showcasing our product features can be a good choice for attracting user on landing pages. By showcasing in 3D style also a good choice, in this tutorial I am going to share how to showcase our product feature in 3D style using CSS3 3D Transform and jQuery.

Showcase Behaviour

The showcase will be displaying product image and tagline. The tagline will be positioned in the middle of product image, so there will be product image in two positions, left and right of the tagline. These images will be rotated in 3D around y-axis with angle of rotation -35 degree for the left image and 35 degree value for the right, the image will be rotated like following image :



Each product image will have two images and those images will be stacked each other also each of them will have infinite bouncing effect. The last effect will be rotation to the left and right on all of product image and tagline, this aim to show our rotated image its normal state before rotated.


The Markup & Styling

The product image and tagline wrapped by a single div named wrapper-item while the product image itself wrapped by a div named left and right. All of them will wrapped also by a single div named container, this div will control our 3D perspective. In this tutorial I’m using some of themify themes for the product image.

Blogfolio Folo
Lot of awesome themes!
Download the lovely one!
Grido Itheme2

The container div will have 2000px perspective and our wrapper-item will have preserve-3d. For product image on the left we transform them into -35 degree angle and 35 degree for product image on the right.

#container {
  margin: 0 auto;
  overflow: hidden;
  width: 1100px;
  max-width: 1100px;
  perspective: 2000px;
}

  .wrapper-item {
    position: relative;
    margin: 0 auto;
    width: 1000px;
    height: 400px;
    margin-bottom: 3em;
    transform-style: preserve-3d;
  }
  
  .left img, 
  .right img {
    position: absolute;
    border-radius: 4px;
    box-shadow: 0px 10px 25px rgba(0,0,0,.3);
  }
  
  .left img {
    transform: rotate3d(0,1,0,-35deg);
  }
  
  .right img {
    transform: rotate3d(0,1,0,35deg);
  }

Here is the result :


Animation

Each product image will have bouncing animation with infinite loop. To make it more attractive we add delay for each second image both on the left and right. We’ll create a keyframe named bouncing-left and bouncing-right and add them on the product image and also positioning them.

.left img:nth-child(1) { 
  left: 4em; 
  top: 8em; 
  animation: bouncing-left 2s ease-in-out infinite alternate both;
}
  
.left img:nth-child(2) { 
  left: -2em; 
  top: 12em; 
  animation: bouncing-left 2s ease-in-out infinite alternate both;
  animation-delay: .5s;
}
  
.right img:nth-child(1) { 
  right: 4em; 
  top: 8em; 
  animation: bouncing-right 2s ease-in-out infinite alternate both;
}
  
.right img:nth-child(2) { 
  right: -2em; 
  top: 12em; 
  animation: bouncing-right 2s ease-in-out infinite alternate both;
  animation-delay: .5s;
}

@keyframes bouncing-left {
  0% { transform: translateY(-10px) rotate3d(0,1,0,-35deg); }
  100% { transform: translateY(10px) rotate3d(0,1,0,-35deg); }
}   

@keyframes bouncing-right {
  0% { transform: translateY(-10px) rotate3d(0,1,0,35deg); }
  100% { transform: translateY(10px) rotate3d(0,1,0,35deg); }
}  

We also add rotation animation on the wrapper-item, the rotation will rotate start from 0 degree to 35 degree then rotate to -35 degree and back to 0 degree. This animation will only move 3 times and delayed for 3 seconds on start.

.wrapper-item {
  position: relative;
  margin: 0 auto;
  width: 1000px;
  height: 400px;
  margin-bottom: 3em;
  transform-style: preserve-3d;  
  transition: .5s ease-in-out;
  animation: rotating 10s ease-in-out 3 alternate both;
  animation-delay: 3s;
}

@keyframes rotating {
  0% { transform: rotate3d(0,1,0,0deg); }
  30% { transform: rotate3d(0,1,0,35deg); } 
  60% { transform: rotate3d(0,1,0,-35deg); } 
  100% { transform: rotate3d(0,1,0,0deg); }
}

Our product showcase will be like following image :


Navigation

Since we have more than one product feature we need to create a navigation for displaying each product feature. The first product feature will be displayed on page load and other will be hidden, when navigation clicked the hidden one will be displayed with fade in effect. This will be done with JavaScript with jQuery help.

$(document).ready(function() {
  
  //Show only first wrapper
  $( '.wrapper-item:not(:first-child)' ).hide();
  
  //Navigation on click
  $( '.nav' ).on( 'click' , function() {
    
    this_index = parseInt($(this).index()) + 1;
    
    $( '.nav' ).removeClass( 'selected' ).end().find( this ).addClass( 'selected' );

    $( '.wrapper-item' ).hide();
    $( '.wrapper-item:nth-child(' + this_index + ')' ).fadeIn( 'fast' );
    
  } );
});

The script above tell that if one of nav item clicked it will display the hidden product feature according to its index and hide others.

Finish

Our showcase for product feature is done, with CSS3 3D transform and animation we can enhance our showcase style like we done before. Please enjoy!

 

This Post Tags :

Bookmark Post :

Pin It
  • Flash RIP :)

  • Very nice work ! But big lag on my computer ! (~5 fps) and full CPU usage ^^ (firefox 13.0, linux kernel 2.6.38-15 with Intel Mobile 945GM/GMS/GME, 943/940GML Express Integrated Graphics Controller)
    Maybe the technology is not fully operational on linux ?

    • Same on Mac version but works very smooth on Safari, couldn’t find the answer yet.

  • very nice job.