<body>
  <div id="wrapper">
      <div id="postal">
        <figure></figure>
        <figure class="back">
          <h2>Escola Espai</h2> 
          <ul>
            <li><a href="#">Area de 3D y Autocad</a></li>
            <li><a href="">Área de Diseño Web y Desarrollo</a></li>
            <li><a href="http://www.espai.es/index.php/cursos/cursos-diseno-grafico-y-maquetacion-en-barcelona">Área de Diseño Gráfico y Maquetación</a></li>
            <li><a href="http://www.espai.es/index.php/cursos/cursos-marketing-digital-en-barcelona">Área de Marketing Digital</a></li>
            <li><a href="http://www.espai.es/index.php/cursos/cursos-sistemas-redes-y-hardware-en-barcelona">Área de Sistemas y Redes</a></li>
            <li><a href="http://www.espai.es/index.php/cursos/cursos-edicion-de-video-y-postproduccion-en-barcelona">Área de Edición Video y Postproducción</a></li>
            <li><a href="http://www.espai.es/index.php/cursos/cursos-ofimatica-en-barcelona">Área de Ofimática</a></li>
            <li><a href="http://www.espai.es/index.php/cursos/cursos-programacion-en-barcelona">Área de Programación</a></li>
          </ul>
        </figure>
      </div>
	  </div>
</body>
body{
   font-size:16px;
   font-family: Arial
}
h2{margin:0;}
ul,li{margin:0;list-style: none; padding:0;}

#wrapper {
  width: 320px;
  height: 260px;
  margin:0 auto;
  position: relative;
  border:1px solid #888;
  -webkit-perspective: 700px;
    -moz-perspective: 700px;
      perspective: 700px;
}
#postal {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
      transform-style: preserve-3d;
  -webkit-transition: transform 500ms ease-in-out;
    -moz-transition: transform 500ms ease-in-out;
      -o-transition: transform 500ms ease-in-out;
        transition: transform 500ms ease-in-out;
}	
#wrapper:hover #postal {
  -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
      ms-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
figure {
  position: absolute;
  width: 100%;
  height: 100%;
  margin:0;
  display: block;
  background: #e9e9e9      url('http://www.espai.es/templates/fontaine_j3/styles/tangerine/images/logo.png') 10px center no-repeat;
  -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
      backface-visibility: hidden;
}
figure.back {
  display: block;
  padding: 10px 0 0 0 ;
  color: #fff;
  background: #e9e9e9;
  -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
      ms-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
          transform: rotateY(180deg);
  -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
      box-sizing: border-box;
}
figure h2{
  color:#FF5A19;
  padding-left:10px;
}
figure ul{
  margin-top:22px;
  background: #00B0AD;	
  -webkit-box-shadow: 0px -4px 4px 0px rgba(0,0,0,0.39);
    -moz-box-shadow: 0px -4px 4px 0px rgba(0,0,0,0.39);
      box-shadow: 0px -4px 4px 0px rgba(0,0,0,0.39);
}
figure li a{
  color:#fff;
  text-decoration: none;
  font-size: .8em;
  display: inline-block;
  padding:5px 0 5px 10px;
}
figure li:hover{
  background-color:#e9e9e9; 
}
figure li:hover a{
  color:#222;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.