Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » Problemas con la animación

CSS - Problemas con la animación

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

Problemas con la animación

Publicado por Eduardo (5 intervenciones) el 29/11/2023 15:35:46
Hola gente, queria saber si alguien me puede ayudar a encontrar el problema o el error, estoy tratando de crear una tragamonedas, la cuestion es que todo va bien hasta que agrego el boton para que empiece a girar los rodillos, donde agrego el boton, empiezan a girar de a uno, pero se empiezan a desplazar para a bajo de a uno, terminan de girar y vuelven a su lugar, la idea es que se queden en su lugar girando, aca les dejo lo que hice y agradecería su ayuda, desde ya muchas gracias

<!DOCTYPE html>
<html lang="es">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
text-align: center;
}

.contenedor {
perspective: 800px;
margin: 50px auto;
width: 20px;
height: 200px;
}

.galeria {
width: 100%;
height: 100%;
transform-style: preserve-3d;
position: relative;
transform-origin: 0% 0%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.result {
width: 100%;
height: 50px;
position: absolute;
transform-origin: 0% 0%;
font-size: 2em;
display: flex;
align-items: center;
justify-content: center;
backface-visibility: hidden;
}

.nombre-maquina {
top: 50px !important;
font-size: 30px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}

@keyframes girar {
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(360deg);
}
}

.result:nth-child(1),
.result:nth-child(10),
.result:nth-child(19),
.result:nth-child(28) { transform: rotateX(0deg) translateZ(120px); }

.result:nth-child(2),
.result:nth-child(11),
.result:nth-child(20),
.result:nth-child(29) { transform: rotateX(40deg) translateZ(120px); }

.result:nth-child(3),
.result:nth-child(12),
.result:nth-child(21),
.result:nth-child(30) { transform: rotateX(80deg) translateZ(120px); }

.result:nth-child(4),
.result:nth-child(13),
.result:nth-child(22),
.result:nth-child(31) { transform: rotateX(120deg) translateZ(120px); }

.result:nth-child(5),
.result:nth-child(14),
.result:nth-child(23),
.result:nth-child(32) { transform: rotateX(160deg) translateZ(120px); }

.result:nth-child(6),
.result:nth-child(15),
.result:nth-child(24),
.result:nth-child(33) { transform: rotateX(200deg) translateZ(120px); }

.result:nth-child(7),
.result:nth-child(16),
.result:nth-child(25),
.result:nth-child(34) { transform: rotateX(240deg) translateZ(120px); }

.result:nth-child(8),
.result:nth-child(17),
.result:nth-child(26),
.result:nth-child(35) { transform: rotateX(280deg) translateZ(120px); }

.result:nth-child(9),
.result:nth-child(18),
.result:nth-child(27),
.result:nth-child(36) { transform: rotateX(320deg) translateZ(120px); }

.rodillo {
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
animation: none; /* Inicialmente sin animación */
}

.rodillo:nth-child(1) { left: -120px; }
.rodillo:nth-child(2) { left: -40px; }
.rodillo:nth-child(3) { left: 40px; }
.rodillo:nth-child(4) { left: 120px; }

.boton-volver {
position: absolute;
top: 10px;
left: 10px;
padding: 5px;
font-size: 8px;
cursor: pointer;
background-color: #4caf50;
color: white;
border: none;
border-radius: 4px;
}

.boton-girar {
margin-top: 20px;
padding: 10px;
font-size: 16px;
cursor: pointer;
background-color: #2196F3;
color: white;
border: none;
border-radius: 4px;
}

.info-usuario {
position: absolute;
top: 10px;
right: 10px;
display: flex;
flex-direction: column;
align-items: flex-end;
}

.info-usuario p {
font-size: 12px;
margin: 0;
margin-right: 5px;
}
</style>
</head>

<body>
<button class="boton-volver" onclick="volverSalaEntrada()">Sala de Entrada</button>

<h1 class="nombre-maquina">Máquina Tragamonedas</h1>

<div class="contenedor">
<div class="galeria rodillo" id="rodillo1">
<div class="result">
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Ivan

Problemas con la animación

Publicado por Ivan (45 intervenciones) el 30/11/2023 16:06:40
Hola,

el código que has puesto está cortado y no se puede ver el problema.

Un saludo!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Problemas con la animación

Publicado por Eduardo (5 intervenciones) el 01/12/2023 15:31:14
Hola, como estas?? Gracias por tomarte el tiempo de mirarlo, mira yo lo copue directo del editor y lo pegue aca, no se copio tal cual por los marguenes que deja el editor de codigos, pero si esta todo el codigo, en que parte decis esta cortado el codigo??
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Ivan

Problemas con la animación

Publicado por Ivan (45 intervenciones) el 02/12/2023 00:27:05
Hola,

pues faltaria toda la parte del <body> para ver la estructura del HTML.

Un saludo!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Problemas con la animación

Publicado por Eduardo (5 intervenciones) el 02/12/2023 02:29:53
Aaaaaa te pido disculpas, recien lo mire bien y si,falta el resto

<!DOCTYPE html>
<html lang="es">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
text-align: center;
}

.contenedor {
perspective: 800px;
margin: 50px auto;
width: 20px;
height: 200px;
}

.galeria {
width: 100%;
height: 100%;
transform-style: preserve-3d;
position: relative;
transform-origin: 0% 0%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.result {
width: 100%;
height: 50px;
position: absolute;
transform-origin: 0% 0%;
font-size: 2em;
display: flex;
align-items: center;
justify-content: center;
backface-visibility: hidden;
}

.nombre-maquina {
top: 50px !important;
font-size: 30px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}

@keyframes girar {
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(360deg);
}
}

.result:nth-child(1),
.result:nth-child(10),
.result:nth-child(19),
.result:nth-child(28) { transform: rotateX(0deg) translateZ(120px); }

.result:nth-child(2),
.result:nth-child(11),
.result:nth-child(20),
.result:nth-child(29) { transform: rotateX(40deg) translateZ(120px); }

.result:nth-child(3),
.result:nth-child(12),
.result:nth-child(21),
.result:nth-child(30) { transform: rotateX(80deg) translateZ(120px); }

.result:nth-child(4),
.result:nth-child(13),
.result:nth-child(22),
.result:nth-child(31) { transform: rotateX(120deg) translateZ(120px); }

.result:nth-child(5),
.result:nth-child(14),
.result:nth-child(23),
.result:nth-child(32) { transform: rotateX(160deg) translateZ(120px); }

.result:nth-child(6),
.result:nth-child(15),
.result:nth-child(24),
.result:nth-child(33) { transform: rotateX(200deg) translateZ(120px); }

.result:nth-child(7),
.result:nth-child(16),
.result:nth-child(25),
.result:nth-child(34) { transform: rotateX(240deg) translateZ(120px); }

.result:nth-child(8),
.result:nth-child(17),
.result:nth-child(26),
.result:nth-child(35) { transform: rotateX(280deg) translateZ(120px); }

.result:nth-child(9),
.result:nth-child(18),
.result:nth-child(27),
.result:nth-child(36) { transform: rotateX(320deg) translateZ(120px); }

.rodillo {
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
animation: none; /* Inicialmente sin animación */
}

.rodillo:nth-child(1) { left: -120px; }
.rodillo:nth-child(2) { left: -40px; }
.rodillo:nth-child(3) { left: 40px; }
.rodillo:nth-child(4) { left: 120px; }

.boton-volver {
position: absolute;
top: 10px;
left: 10px;
padding: 5px;
font-size: 8px;
cursor: pointer;
background-color: #4caf50;
color: white;
border: none;
border-radius: 4px;
}

.boton-girar {
margin-top: 20px;
padding: 10px;
font-size: 16px;
cursor: pointer;
background-color: #2196F3;
color: white;
border: none;
border-radius: 4px;
}

.info-usuario {
position: absolute;
top: 10px;
right: 10px;
display: flex;
flex-direction: column;
align-items: flex-end;
}

.info-usuario p {
font-size: 12px;
margin: 0;
margin-right: 5px;
}
</style>
</head>

<body>
<button class="boton-volver" onclick="volverSalaEntrada()">Sala de Entrada</button>

<h1 class="nombre-maquina">Máquina Tragamonedas</h1>

<div class="contenedor">
<div class="galeria rodillo" id="rodillo1">
<div class="result">
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Problemas con la animación

Publicado por Eduardo (5 intervenciones) el 02/12/2023 02:32:06
<body>
<button class="boton-volver" onclick="volverSalaEntrada()">Sala de Entrada</button>

<h1 class="nombre-maquina">Máquina Tragamonedas</h1>

<div class="contenedor">
<div class="galeria rodillo" id="rodillo1">
<div class="result">
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Problemas con la animación

Publicado por Eduardo (5 intervenciones) el 02/12/2023 02:41:46
Screenshot_20231201-223818_Code-Editor
Screenshot_20231201-223833_Code-Editor

Te lo subo en imagen porque no me deja cargar esa parte del codigo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar