.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í...
hover
, no veo que diga que debe disparar la animación.display:flex
podrías jugar con la propiedadorder
para carmbiarlos de orden