Tarjetas 3d volteables, se superponen los textos de las caras

quico5 · #1 (**permalink**) 11/08/2018, 19:11

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>

xfxstudios · #2 (**permalink**) 12/08/2018, 22:45

me perdí de algo? o perdiste el resto de tu consulta?

en todo caso te recomendaria que cambiaras esta linea:

Código CSS:

Ver original/*Cambia esto*/
.card>*>*{transform:translateZ(2em);}
 
/*por esto:*/
.card>*{transform:translateZ(2em);}

y mejora las preguntas
`

quico5 · #3 (**permalink**) 13/08/2018, 14:05

Gracias por responder @xfxstudios

Me he basado en este ejemplo: https://codepen.io/tyrellrummage/pen/wqGgLO
El cual es bastante más complejo y queria simplificarlo todo lo posible

Si lo pongo como dices el texto queda al mismo nivel que la capa porque no funciona
.card>*{transform:translateZ(2em);}

Mientras que así cuando esta volteando tiene mayor efecto 3D al verse flotado el texto del resto del div
.card>*>*{transform:translateZ(2em);}

Podria ahorrarme el efecto, pero me gustaria conseguir replicarlo con el código justo y necesario

Un saludo y a la espera de una solución