Learn and share. The simplest harmony.

 

Showing Product Information With CSS3 3D Transform

Posted on April 26, 2012 and got 25 shouts so far

There are many ways on showing product information, for example when hover the product image, the product information is sliding above or even using pop up. In this tutorial I’m going to share how to show our product information with cube style using CSS3 3D Transform.

The Result

Before talking about the technique following image is the result we want to achieve, the product image is visible while the product information is hidden. When user hovering the item both of them will rotate vertically to up direction making the product information visible and the image hidden, looks like a rotating cube.


The Technique

The technique we will use for creating the cube is from previous technique we’ve done before (see : Creating “Next Level” Search Form Using jQuery & CSS3) There are two elements, front side and bottom side, front is product image and product information is bottom side. The bottom side is hidden by rotating its X axis to -90 degree and playing the translateZ value to make its position below the front.

There are two elements wrapping them, first named wrapper for setting the perspective this aims to define how far the element placed relatively from user view, the smaller value the element will placed closer. Second element named item also wrapped by wrapper is wrapping the image and information, this element when having an hover event will rotate its X axis to 95 degree to show the information and hide the image.


The Markup & Styling

I’m using all images from Shopify App Store for product image. Each product will have two wrapper elements and a single information element as described before, here is the markup :

Contact Form The easiest way to add a contact form to your shop.

Each wrapper will have inline-block display and perspective value to 4000px, item will have preserve-3d on transform-style value to make its children preserve its 3D position and also having transition property to make the change when hovering animated.

.wrapper {
  display: inline-block;
  width: 310px;
  height: 100px;
  vertical-align: top;
  margin: 1em 1.5em 2em 0;
  cursor: pointer;
  position: relative;
  font-family: Tahoma, Arial;
  perspective: 4000px;
}

.item {
  height: 100px;
  transform-style: preserve-3d;
  transition: transform .6s;
}

Product image and product information will have transition, both of them will change its border-radius and box-shadow value when user hovering, this aim to make the transition more elegant.

.item img {
  display: block;
  position: absolute;
  top: 0;
  border-radius: 3px;
  box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
  transform: translateZ(50px);
  transition: all .6s;
  
}

.item .information {
  display: block;
  position: absolute;
  top: 0;
  height: 80px;
  width: 290px;
  text-align: left;
  border-radius: 15px;
  padding: 10px;
  font-size: 12px;
  text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
  box-shadow: none;
  background: linear-gradient(to bottom,rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
  transform: rotateX(-90deg) translateZ(50px);
  transition: all .6s;
  
}

And the last is when user hover our product, it will rotate the item element and change image and information’s border-radius and box-shadow.

.item:hover {
  transform: translateZ(-50px) rotateX(95deg);
}

  .item:hover img {
    box-shadow: none;
    border-radius: 15px;
  }
  
  .item:hover .information {
    box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
    border-radius: 3px;
  }

The result :

Finish

We’re done, the cube transition should work on browser that support 3D transform. I also add script detection using modernizr to check browser capability. Enjoy!

 

This Post Tags :

Bookmark Post :

Pin It
  • Great tutorial and neat effect. Bet this gets copied all over the web soon.

    Just a tiny tweak, if you used the css selector:

    .item > img
    and
    .item:hover > img

    then it wouldn’t mess things up if at some future point you included an image within the information section.
    Better still, give the img tag it’s own class.

    Cheers

  • Oh and silly question, but how do people with a touchscreen device (IPad, etc) see the information ?

    • You’re sharp!
      In that case I think we should use touchstart and touchend event and add classes that has similar action with :hover to the item.

      • It actually works great on the iPad, it just uses a tap instead of hover to rotate. Great idea though with touchstart and touchend as a fail-safe though!

  • nice bro, excellent tutorial like your all other appreciateable works !

  • Hi,

    You might want to let people know that they will need browser specific’s to make this work.

    I know it’s normally pretty standard but I spent 5 minutes working out that the transform property wont work without browser hacks.

    J

    • Hi Joshua,

      I put modernizr on demo page to check browser support for 3D transform, if your browser doesn’t support then the text “Your browser doesn’t support CSS3 3D Transform” should be visible below “Read Tutorial” text.

  • This isn’t working in Chrome 18.0.1 All i see are blank spaces when i take mouse over the images and i also don’t see any message that my broswer doesn’t supports these 3d transformations.

    Although i see them in Firefox 12.

    • Hmm.. weird, so there’re two reader got the same problem. I put simple check for 3D transform on the demo page :

      if(!Modernizr.csstransforms3d) 

      Couldn’t find the answer yet but there’s some issues with modernizr for checking 3D transform https://github.com/Modernizr/Modernizr/issues/search?q=+3d+transforms

      Let me know if someone find the answer.

      • Using Chrome 18 on Ubuntu – nay workie.

  • Thabk’s for this

  • The unprefixed value ‘linear-gradient(top, #…, #…)’ is wrong. According to the specification it must be ‘linear-gradient(to bottom, #…, #…)’ or just ‘linear-gradient(#…, #…)’ since ‘to bottom’ is the default. See http://www.1stwebdesigner.com/css/mastering-css-gradients-in-less-than-1-hour/#comment-205142

    • +1 Thank you!
      The code has been modified.

  • Great tutorial. Love it! And THANKS for sharing!
    At the beginning I was a bit sceptic about the usability on touch screens but it actually works quite well.

    Have a great day. Mike

    p.s. by the way: Great looking website!

  • What about ipad and iphone???

    cause there is no hover state in those devices

    thanks

  • How did you make the information positioned at the bottom of a cube?

    • The information is a nested in the same as the image. It’s transformed(rotated) on the X axis at -90deg. So this hides it as a single pixel line; it is then hidden underneath the image.

  • Nice post……… Thanks…. :)

  • Does this not work in Internet Explorer? What can I do? I just spent a lot of time building it in Firefox. Works Great there!! Unfortunately most of our viewers are using IE.

    Is there a fix for IE? I can’t just have it say your browser doesn’t support.

  • Поставил этот эффект себе на сайт http://pdru.ru, отлично работает!

  • Great work…!! i like it.

    I am trying to copy your work .
    but m getting some error.
    while using Transform property in css…
    reply as soon as possible…….

  • wow,thank you very much~~~~

  • The script is awesome, but unfortunately its not working in Internet explorer :(

    Please send me the solution.

    Thanks
    Atiff

    • I think there is no real solution for IE, because IE don’t understand the CSS3 3d transformations.
      The only solution is to rebuild the CSS3 3d transformations with jquery.
      Search for modernizr…

  • How can I modify the width of this box/css to 300px?
    Tank u