Ver Mensaje Individual
  #1 (permalink)  
Antiguo 11/08/2018, 19:11
quico5
 
Fecha de Ingreso: enero-2008
Mensajes: 580
Antigüedad: 16 años, 2 meses
Puntos: 9
Tarjetas 3d volteables, se superponen los textos de las caras

Código HTML:
<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		.card {
			position:relative;
			width:15rem;height:20rem;
			perspective:30rem;
		}
		.card>* {
			position:absolute;
			width:inherit;height:inherit;
			transition:transform 1s;
			backface-visibility:hidden;
			perspective:inherit;
			transform-style:preserve-3d;
		}
		.card>*>*{transform:translateZ(2em);}
		.card>*{display:flex;justify-content:center;align-items:center;}
		.card>:first-child{background-color:#66ccff;}
		.card>:last-child{background-color:#dd8800;}
		.card>:last-child{transform:rotateY(180deg);}
		.card:hover>:first-child{transform:rotateY(180deg);}
		.card:hover>:last-child{transform:rotateY(360deg);}
		.card>:first-child{transform:rotateY(0deg);}
	</style>
</head>
<body>
<div class="card">
	<div><span>Front</span></div>
	<div><span>Back</span></div>
</div>
</body>
</html> 

Última edición por quico5; 11/08/2018 a las 19:52