Caja, Cubo 3D con Css3 animación (Mostrar información)

hay muchas formas de mostrar la información de un producto, ya sea mediante animación con Jquery que es la mas tedioza de hacer hasta la mas simple que es generar una pestaña o ventana emergente que no siempre es bueno, por que algunos navegadores tiene activado por defecto el bloqueo de la misma.
En este tutorial voy a compartir una forma de mostrar la información de nuestros productos con estilo cubo con CSS3 3D animada.

Creando el Cuerpo o marcado en HTML

<div class="wrapper">
  <div class="item">
    <img src="images/contact.png">
    <span class="information">
      <strong>Contact Form</strong> The easiest way to add a contact form to your shop.
    </span>
  </div>
</div><!--fin wrapper -->

Aplicando el CSS3 a nuestro Cubo 3D animado

Cada contenedor(wrapper), tendrá display:inline-block, y valor de la perspective:4000px, cada caja(cubo) tendrá que conservar el 3d en transformación(transform-style: preserve-3d;), para que sus hijos conserven su posición en 3D y también tengan propiedades de transición para hacer el cambio al pasar el cursor animado.

.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;
}

La imagen del producto y la información de producto tendrá transición, por lo tanto va a cambiar su border-radius y box-shadow valor cuando el usuario pase el mouse, con el fin de hacer la transición más elegante.

.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;
}

Y por último es cuando el usuario sitúe el mouse en nuestro producto(hover), esto hará girar el objeto y el elemento de cambio junto con la información de la frontera pasará adelante y los cambios respectivos con border-radius y 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;
  }

Ya hemos terminado, aca te dejo la Demo y también la descarga de los archivos (contraseña: antocas.com).