JavaFace-elblogdelprogramador

.contenedor_padre {
     -webkit-perspective: 1000;
   -moz-perspective: 1000;
   perspective: 1000;
  }
  .contenedor_padre:hover .contenedor_hijo, .contenedor_padre.hover .contenedor_hijo {
   -webkit-transform: rotateY(180deg);
   -moz-transform: rotateY(180deg);
   transform: rotateY(180deg);
  }
  .contenedor_padre, .primera_capa, .segunda_capa {
   width:340px;
   height:260px;
  }
  .contenedor_hijo {
   -webkit-transition: 0.6s;
   -webkit-transform-style: preserve-3d;
   -moz-transition: 0.6s;
   -moz-transform-style: preserve-3d;
   transition: 0.6s;
   transform-style: preserve-3d;
   position: relative;
  }
  .primera_capa, .segunda_capa {
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   backface-visibility: hidden;
   position: absolute;
   top: 0;
   left: 0;
  }
  .primera_capa {
   background:#317cf8;
   z-index: 2;
   border:1px solid #2954f5;
      text-shadow:1px 1px 1px rgba(255,255,255,0.4);
         box-shadow: 0px 1px 1px rgba(255,255,255,0.2), 0px 1px 3px rgba(25,62,83, 0.1) inset, 0px 0px 0px 8px rgba(155,180,195, 0.3);
  }
  .segunda_capa {
   background:#ffffff;
   border:3px solid #0d0801;
   -webkit-transform: rotateY(180deg);
   -moz-transform: rotateY(180deg);
   transform: rotateY(180deg);
  }
  .primera_capa .name {
   font-size:33px;
   display: inline-block;
   background: rgba(33, 33, 33, 0.9);
   color: #f8f8f8;
   font-family: Courier;
   padding: 5px 15px;
   border-radius: 5px;
   bottom:30px;
   left:50%;
   position: absolute;
   text-shadow: 0.1em 0.1em 0.05em #333;
   -webkit-transform: rotate(-20deg);
   -moz-transform: rotate(-20deg);
   transform: rotate(-20deg);
  }
        .primera_capa .author {
   font-size: 1.4em;
   display: inline-block;
   background: rgba(255,255,255, 0.9);
   color:#f80135;
      font-family: "wf_SegoeUILight", "Segoe UI Light", "Segoe WP Light", "wf_SegoeUI", "Segoe UI", "Tahoma", Arial, Verdana,   sans-serif;
   padding: 5px 10px;
   border-radius: 5px;
   bottom:5px;
   left:80%;
   position: absolute;
   -webkit-transform: rotate(-20deg);
   -moz-transform: rotate(-20deg);
   transform: rotate(-20deg);
  }
  .primera_capa .habilidad{
      color:#ffffff;
   float:left;
   margin:20px 35%;
   line-height:1.6em;
   font-family: "wf_SegoeUILight", "Segoe UI Light", "Segoe WP Light", "wf_SegoeUI", "Segoe UI", "Tahoma", Arial, Verdana,   sans-serif;
  }
  .habilidad h4{
      color:#ffffff;
   float:left;
   margin:-15px 20%;
   line-height:2.6em;
   font: italic 18px Georgia;
   font-weight:bold;
  }
  .primera_capa .biografia {
      color:#ffffff;
   float:left;
   margin:-30px 10px;
   line-height:1.6em;
   font-family: "wf_SegoeUILight", "Segoe UI Light", "Segoe WP Light", "wf_SegoeUI", "Segoe UI", "Tahoma", Arial, Verdana,   sans-serif;
  }
  .logo img {
   position: absolute;
   top:10px;
   left:15px;
   width:85px;
   height:85px;
   border-radius: 50%; /* Borde redondeado */
   border:3px solid #FFF;
            background:#CCC;
  }
        .segunda_capa .parrafo{
      color: #00304a;
   float:left;
   margin:20px 10px;
   line-height:1.6em;
   font-family: "wf_SegoeUILight", "Segoe UI Light", "Segoe WP Light", "wf_SegoeUI", "Segoe UI", "Tahoma", Arial, Verdana,   sans-serif;
  }
  .segunda_capa p {
   position: absolute;
   bottom: 40px;
   left: 0;
   right: 0;
   text-align: center;
   padding: 0 20px;
  }
  .segunda_capa .nombre {
   font-size:16px;
   padding: 5px 10px;
   background: rgba(0,0,0, 0.9);
   color:#ffffff;
   font-family: "wf_SegoeUILight", "Segoe UI Light", "Segoe WP Light", "wf_SegoeUI", "Segoe UI", "Tahoma", Arial, Verdana,   sans-serif;
   border-radius: 5px;
   bottom:20px;
   left:50%;
   margin:0 auto 0 auto;
   text-align:center;
   position: absolute;
  }

div class="contenedor_padre" ontouchstart="this.classList.toggle('hover');"
  div class="contenedor_hijo"
            !--FRENTE--
   div class="primera_capa"
            
               div class="logo"
                 img alt='JavaFace' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0pAOLzpJNBhWZTUOWKR8DQcbg61BWAkkZbEBxB1Q83JR12pe5wFrBxHS-35BSQe9SB0Ca9v1D_40pmTQqu3w0vZvWleBk_uaxSA5Ls3o_bQCRwSTGgVgau78JITJQ86cF7r3vC3TnWZk/s250/FACE.png'/
               /div
               span class="habilidad"
                 h4Especialidades/h4
                 ul
                 liA un no las se/li
                 licuando sepa se las/li
                 liDigo/li
                 /ul
                /span
                 span class="biografia"
                 Soy ciego,sordo,mudo terco y testarudo...a no
                 esa es SHAKIRA.!! lol
                /span
      span class="name"JavaFace.P/span
               span class="author"Author/span
   /div
            !--ATRAS--
    div class="segunda_capa"
    span class="parrafo"
                  Queda prohibido no sonreír a los problemas,
                         no luchar por lo que quieres, 
                  abandonarlo todo por miedo, 
                   no convertir en realidad tus sueños
                /span
                span class="nombre"Pablo Neruda/span
   /div
            !--fin atras--
  /div
 /div