Edit in JSFiddle

 <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://lh4.googleusercontent.com/-5tCy_BwCTrA/UL-SM9Y-arI/AAAAAAAAEKQ/XAi7tomteqM/s250/FACE.png'/>
               </div>
               <span class="habilidad">
                 <h4>Especialidades</h4>
                 <ul>
                 <li>A un no las se</li>
                 <li>cuando sepa se las</li>
                 <li>Digo</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>

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