0

.box {
  width: 100px;
  height: 100px;
  margin: 10px 5px;
  padding: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.5s ease-in-out;
  font-size: 20px;
  background: blue;
  color: black;
  transition: 3s ease-in-out;
}

#box1:hover {
  transform: rotate(270deg);
  transition: 1s ease-in-out;
}

#box2:hover {
  transform: rotate(270deg);
  transition: 2s ease-in-out;
}

#box3:hover {
  transform: rotate(270deg);
  transition: 3s ease-in-out;
}

#box4:hover {
  transform: rotate(270deg);
  transition: 4s ease-in-out;
}
<div class="container">
  <div class="box" id="box1">Caja 1</div>
  <div class="box" id="box2">Caja 2</div>
  <div class="box" id="box3">Caja 3</div>
  <div class="box" id="box4">Caja 4</div>
</div>

Dados el siguiente código HTML y CSS base, crear las transiciones necesarias para pasar del estado inicial al final, aplicando las siguientes transformaciones:

  • Rotar los elementos 270grados
  • Intercambiar las posiciones de las cajas 1 y 2, 3 y 4
  • Cambiar el tamaño de 100px a 50px
  • Cambiar el color de fondo de azul a rojo
  • Cambiar el color del texto de negro a amarillo
  • Cambiar el tamaño de letra de 20px a 18px.

En realidad solo busco saber como es que se hace el cambio de posiciones entre cajas, es decir, que al pasar el puntero por la caja1 esta se mueva hacia donde se encuentra la caja2 y así...

7
  • ¿Es un intercambio aleatorio o es del 1 al 2, del 2 al 3...?
    – padaleiana
    Commented el 12 oct. 2023 a las 10:12
  • @padaleiana según entiendo el intercambio de posiciones es [1 al 2 y 2 al 1] y [3 al 4 y 4 al 3]. Lo que no me queda claro es porque tiene que ser en el hover, no veo que diga que debe disparar la animación.
    – Marcos
    Commented el 12 oct. 2023 a las 10:49
  • @Marcos no necesariamente en el hover y el orden puede ser aleatorio
    – AmateurFV
    Commented el 12 oct. 2023 a las 23:37
  • si le dieras a container display:flex podrías jugar con la propiedad order para carmbiarlos de orden
    – ffflabs
    Commented el 13 oct. 2023 a las 0:04
  • @ffflabs y como aplicaria el order o en donde?
    – AmateurFV
    Commented el 13 oct. 2023 a las 2:04

1 respuesta 1

-1

El resultado sería el siguiente:

.box { width: 100px; height: 100px; margin: 10px 5px; padding: 15px; display: flex; justify-content: center; align-items: center; transition: all 0.5s ease-in-out; font-size: 20px; background: blue; color: black; }

#box1:hover { transform: rotate(270deg); transition: 1s ease-in-out; }

#box2:hover { transform: rotate(270deg); transition: 2s ease-in-out; }

#box3:hover { transform: rotate(270deg); transition: 3s ease-in-out; }

#box4:hover { transform: rotate(270deg); transition: 4s ease-in-out; }

Espero que te haya servido

Javi17mod

1
  • 3
    Bienvenido a SOes. Por aquí no solemos responder haciendo tareas de clase, puesto que copiar y pegar no sirve para aprender. Por otro lado, si vas a responder te recomiendo que añadas una explicación de por qué tu código responde a la pregunta! Una respuesta de solo código no es correcta. Y si hubieses añadido la explicación verías que tu respuesta tampoco responde a la pregunta en realidad, puesto que me da la sensación de que tu código no reordena de ninguna manera las cajas. De hecho, parece que lo único que has hecho es pegar el código de la pregunta con un formato ligeramente diferente...
    – Benito-B
    Commented el 16 oct. 2023 a las 7:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.