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, 19:11
 
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
  #2 (permalink)  
Antiguo 12/08/2018, 22:45
Avatar de xfxstudios  
Fecha de Ingreso: junio-2015
Ubicación: Valencia - Venezuela
Mensajes: 2.448
Antigüedad: 8 años, 9 meses
Puntos: 263
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 22:50
  #3 (permalink)  
Antiguo 13/08/2018, 14:05
 
Fecha de Ingreso: enero-2008
Mensajes: 580
Antigüedad: 16 años, 2 meses
Puntos: 9
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

Etiquetas: tarjetas, textos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 03:04.