Div dos caras con css3

div semi giratorio con dos caras en css3

by JavaFace

HTML

<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>

CSS

.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:...