Efectos visuales y movimiento con CSS

/* Estilo base del elemento visible */
.box {
  width: 300px; /* Ancho del elemento en el eje X */
  height: 120px; /* Alto del elemento en el eje Y */
  background-color: #eaeaea; /* Color neutro para visualizar el área */
  transform: translateZ(0); /* Posición inicial sobre el eje Z */
}

/* Estilo del contenedor con gradiente lineal */
.gradient-box {
  width: 100%; /* Ocupa todo el ancho disponible */
  height: 120px; /* Altura visible del gradiente */
  background-image: linear-gradient(red, yellow);
  /* Al no indicar dirección, el gradiente va de arriba hacia abajo */
}

/* Gradiente orientado hacia la derecha */
.gradient-horizontal {
  width: 100%;
  height: 120px;
  background-image: linear-gradient(to right, red, yellow);
  /* 'to right' indica avance sobre el eje X positivo */
}

<!-- Contenedor para visualizar un gradiente radial -->
<div class="gradient-radial"></div>

/* Gradiente radial con forma circular */
.gradient-radial {
  width: 200px;
  height: 200px;
  background-image: radial-gradient(circle, red, gold);
  /* El color rojo nace en el centro y se expande hacia afuera */
}

/* Gradiente radial elíptico con tamaño definido */
.gradient-ellipse {
  width: 300px;
  height: 180px;
  background-image: radial-gradient(ellipse 250px 100px, lightgreen, darkslateblue);
  /* Se especifica el ancho y alto de la elipse del gradiente */
}

/* Estilo base del elemento */
.box {
  width: 150px; /* Ancho visible */
  height: 150px; /* Alto visible */
  background-color: red; /* Color para identificar el elemento */
  transform: none; /* Estado inicial sin transformación */
}

<!-- Caja que se moverá visualmente con translate -->
<div class="move-box"></div>

/* Desplazamiento visual del elemento */
.move-box {
  width: 120px;
  height: 120px;
  background-color: red;
  transform: translate(10px, 20px);
  /* Primer valor: eje X (derecha/izquierda) */
  /* Segundo valor: eje Y (abajo/arriba) */
}

/* Rotación del elemento */
.rotate-box {
  width: 120px;
  height: 120px;
  background-color: red;
  transform: rotate(360deg);
  /* deg representa grados de rotación */
}

/* Rotación tridimensional en eje X */
.rotate-x {
  width: 120px;
  height: 120px;
  background-color: red;
  transform: rotateX(70deg);
  /* El ángulo define la intensidad del giro */
}

/* Rotación en eje Y */
.rotate-y {
  width: 120px;
  height: 120px;
  background-color: red;
  transform: rotateY(70deg);
}

/* Rotación en eje Z */
.rotate-z {
  width: 120px;
  height: 120px;
  background-color: red;
  transform: rotateZ(90deg);
}

/* Escalado del elemento */
.scale-box {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: scale(2, 1);
  /* Primer valor: escala en eje X (ancho) */
  /* Segundo valor: escala en eje Y (alto) */
}

/* Sesgado del elemento en ambos ejes */
.skew-box {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: skew(20deg, 10deg);
  /* Primer valor: deformación en eje X */
  /* Segundo valor: deformación en eje Y */
}

/* Sesgado horizontal */
.skew-x-box {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: skewX(20deg);
}

/* Sesgado vertical */
.skew-y-box {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: skewY(20deg);
}

/* Estilo del ejemplo final */
.final-box {
  width: 100px;
  height: 100px;
  background-color: rgba(255, 0, 0, 0.9);
  transform: skewY(25deg);
  /* El sesgado vertical inclina los laterales del elemento */
}

/* Estado inicial del elemento */
.transition-box {
  height: 100px;
  background-color: yellow;
  transition: height 2s;
  /* Se anima la propiedad height durante 2 segundos */
}

/* Estado al pasar el mouse */
.transition-box:hover {
  height: 200px;
}

/* Estado base */
.multi-transition {
  width: 100px;
  height: 100px;
  background-color: yellow;
  transition: height 2s, width 1s;
}

/* Estado hover */
.multi-transition:hover {
  width: 200px;
  height: 200px;
}

/* Estado inicial */
.all-transition {
  width: 100px;
  height: 100px;
  background-color: yellow;
  transition: 2s;
}

/* Estado hover */
.all-transition:hover {
  width: 200px;
  height: 200px;
  padding: 20px;
  background-color: cyan;
}

/* Estado base del input */
input {
  width: 100px;
  height: 40px;
  transition: all 2s;
}

/* Estado al recibir foco */
input:focus {
  width: 200px;
  font-size: 24px;
}

/* Estado inicial */
.combo-box {
  width: 100px;
  height: 100px;
  background-color: rgba(255, 0, 0, 0.9);
  border: solid 1px;
  transition: transform 1s;
}

/* Estado hover */
.combo-box:hover {
  padding: 20px;
  transform: skewY(25deg);
}

/* Definición de la línea de tiempo */
@keyframes un_efecto {
  0% { width: 100px; }
  10% { width: 50px; }
  25% { width: 300px; }
  50% {
    width: 200px;
    background-color: red;
  }
  75% { width: 300px; }
  100% {
    width: 100px;
    background-color: green;
  }
}

/* Elemento animado */
section {
  width: 100px;
  height: 100px;
  background-color: green;
  animation-name: un_efecto;
  animation-duration: 2s;
  animation-delay: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in;
}

/* Definición de animación */
@keyframes animacion {
  from { }
  to {
    transform: skewY(25deg);
  }
}

/* Configuración inicial */
.animame {
  animation: animacion 1s linear 3s infinite alternate;
}

/* Texto animado */
h1 {
  animation-name: aparecer;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes aparecer {
  0% { opacity: 0; }
  100% { opacity: 1; }
}