Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Tarjetas 3d volteables, se superponen los textos de las caras en el foro de CSS en Foros del Web. 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; ...
  #1 (permalink)  
Antiguo 11/08/2018, 20:11
 
Fecha de Ingreso: enero-2008
Mensajes: 538
Antigüedad: 10 años, 10 meses
Puntos: 7
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 20:52
  #2 (permalink)  
Antiguo 12/08/2018, 23:45
Avatar de xfxstudios  
Fecha de Ingreso: junio-2015
Ubicación: Valencia - Venezuela
Mensajes: 2.416
Antigüedad: 3 años, 5 meses
Puntos: 256
Respuesta: Tarjetas 3d volteables, se superponen los textos de las caras

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
  1. /*Cambia esto*/
  2. .card>*>*{transform:translateZ(2em);}
  3.  
  4. /*por esto:*/
  5. .card>*{transform:translateZ(2em);}


y mejora las preguntas
`
__________________
[email protected]
HITCEL

Última edición por xfxstudios; 12/08/2018 a las 23:50
  #3 (permalink)  
Antiguo 13/08/2018, 15:05
 
Fecha de Ingreso: enero-2008
Mensajes: 538
Antigüedad: 10 años, 10 meses
Puntos: 7
Respuesta: Tarjetas 3d volteables, se superponen los textos de las caras

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



La zona horaria es GMT -6. Ahora son las 02:08.