Efectos visuales y movimiento

1. Sombras

1.1 box-shadow

Se le pueden aplicar 3 tipos de sombras:

Sombra a la caja
Sombra al texto
drop-shadow

La propiedad que da sombra a las cajas se denomina box-shadow, y puede tener los siguientes valores:

box-shadow: (la distancia en x) (la distancia en y) (blur o desenfoque radial) (expansión del desenfoque) (color) (sombra interna o externa).

Estos son los valores posibles que podemos aplicar a la sombra. Se puede utilizar cualquier unidad de medida que prefiramos. Se pueden aplicar valores negativos, con lo que la sombra se movería al otro lado. Se puede trabajar el color aplicando opacidad, con la siguiente sintaxis:

box-shadow: 1rem 1rem 1rem 1rem color: #0005 inset;

Las sombras pueden ser externas (outlet) o internas (inset). Pero no escribir outset, si queremos sombra interna escribimos al final inset. Ejm

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ejm01</title>
    <style>
      .box {
        border: thick solid black;
        margin-left: auto;
        margin-right: auto;
        width: 200px;
        height: 200px;
      }
      .box-shadow {
        box-shadow: 1rem 1rem 1rem 1rem #0005;
      }
    </style>
  </head>
  <body>
    <h1>Ejm01 - Jon Mircha</h1>
    <p>Vamos a dibujar una caja con sombra</p>
    <div class="box box-shadow"></div>
  </body>
</html>

1.2 text-shadow

También podemos aplicar sombras al texto con esta propiedad.

Ejm

p {
text-shadow: 1px (ancho) 1px (alto) 1px (blur)
}

Se pueden aplicar sombras múltiples, para ello separamos con coma las nuevas propiedades, de la siguiente manera.

Ejm

div {
box-shadow: 1px 1px 1px 1px navy, 2px 2px 2px 3px green, -1rem -1rem 1rem 1rem yellow;
}

Les podemos dar valores negativos, no sólo positivos. Las sombras múltiples también se pueden hacer con los textos. La propiedad filter Podemos usar esta propiedad para poner filtros a nuestras cajas y textos. La sintaxis es

filter: drop-shadow (mov-x mov-y blur-radius color)

Ejm

div {
filter: drop-shadow(1rem 1rem 1rem red);
}

Dentro del div si incluimos una imagen con extensión PNG, se le aplicará un filtro con color rojo, lo podemos probar y funcionará perfectamente. NO se pueden aplicar efectos múltiples con el filtro de drop-shadow. Con box-shadow sí se podía.

2. Degradados (gradients)

Existen 3 tipos de degradados:

Degradado lineal
Degradado radial
Degradado cónico

Hay herramientas online que nos ayudan con los degradados, una de las más utilizadas es https://cssgradient.io/.

2.1 Degradado lineal

Los degradados trabajan sobre la propiedad background-color de la siguiente manera.

Ejm

background-image: linear-gradient(red, green);
background-image: linear-gradient (red, green, blue);

Como primer parámetro le podemos pasar los grados, cuya unidad en CSS es deg, de la siguiente manera.

Ejm

background-image: linear-gradient(0deg, red, green, blue);

Si subimos los grados se irá moviendo el degradado en sentido de las manecillas del reloj. Podémos utilizar tb las palabras.

to right
to top
to left
to bottom

de la siguiente manera.

Ejm

background-image: linear-gradient(to right, red, green, blue);

También podemos hacer lo siguiente.

Ejm

background-image: linear-gradient(to top left, red, green, blue);
background-image: linear-gradient(to top right, red, green, blue);

Se pueden agregar más colores.

Ejm

background-image: linear-gradient(to left, red, green, blue, grey);

Podemos usar porcentajes de qué valor a qué valor vayan, de la siguiente manera.

Ejm

background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);

Si queremos dibujar por ejm 3 colores que no se degraden, hacemos lo siguiente.

Ejm

background-image: linear-gradient(90deg, green 33%, white 34% 67%, blue  68%);

2.2. Degradado radial

Por defecto el degradado radial es circular. El uso es el siguiente.

Ejm

background: radial-gradient(red, blue, green);

Podemos tener degradados radiales en forma de círculos y elipses, de la siguiente manera.

Ejm

background: radial-gradient(circle 2rem, red, blue, green)
background: radial-gradient(ellipse 2rem, red, blue, green):

Podemos hacer que cada color tenga un porcentaje en el que salga.

Ejm

background: radial-gradient(circle 4rem, red 30%, blue 31% 67%, yellow);

Podemos decir desde donde va a empezar el centro del radio, de la siguiente manera.

Ejm

background: radial-gradient(4rem at top, red, blue, green)

Los valores posibles de que disponemos son:

at top
at bottom
at left
at right
at center (default)

Podemos hacer combinaciones:

at top left
at top right
at bottom left
at bottom right

Si vamos a utilizar elipse, debemos hacer lo siguiente.

Ejm

background: radial-gradient(ellipse 30px 100px, red, blue, green);

Los 30px son en el eje X, los 100px afectan al eje Y.

2.3 Gradiente cónico

Lo que hace es generar una proyección cónica. La propiedad a usar es conic-gradient. La sintaxis es.

Ejm

background: conic-gradient(red, blue, yellow)

Podemos hacer más cosas, como por ejm.

Ejm

background: conic-gradient(red 0deg 90deg, blue 90deg 120deg, green 120deg 230deg);

El rojo iría de 0 grados a 90, el azul de 90 a 120, y el verde el resto. No va a haber difuminación entre el azul y el verde ya que el verde empieza justo cuando termina el azul. Podemos utilizar la palabra clave from para elegir desde que grados se comienza la cónica.

background: conic-gradient(from 90deg, red 0deg 90deg, blue 90deg 120deg, green 120deg 230deg);

3. Patrones para gradientes

Hay 3 funciones para ello:

repeating-linear-gradient()
repeating-radial-gradient()
repeating-conic-gradient()

Ejm para linear-gradient.

Ejm

background: repeating-linear-gradient(red 0 10px, blue 10px 20px, green 20px 30px);

4. Gráficos con degradados CSS

Vamos a crear 2 gráficas, una de pastel y otra en formato de dona. Veamos dos ejms completos

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      .box {
        width: 200px;
        height: 200px;
      }
      .pastel {
        background-image: conic-gradient(
          cyan 050%,
          magenta 50% 80%,
          yellow 80%
        );
        border-radius: 50%;
      }
      .donut {
        background-image: radial-gradient(
            white 40%,
            black 40% 41%,
            transparent 43%
          ),
          conic-gradient(cyan 0 50%, magenta 50% 80%, yellow 80%);
        border-radius: 50%;
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <div class="box pastel"></div>
    <div class="box donut"></div>
  </body>
</html>

5. Filtros

Vamos a aprender a hacer filtros que se utilizan en software como Ilustrator. Comencemos Hay una gran cantidad de filtros CSS que podemos aplicar.

filter: blur(0.15rem); VALORES DE 1 A 0 (DE CLARO A BORROSO)
filter: britgthness(0.75); // VALORES DE 1 A 0 (DE CLARO A OSCURO)
filter: contrast(0); VALORES DE 0 A 1 (DE OPACO A TRANSPARENTE)
filter: grayscale(0); // ESCALA DE GRISES DE 0 A 1 (DE MENOS A MÁS GRIS)
filter: sepia(); // DE 0 A 1 (EN 0 NO SE APLICA NADA)
filter: hue-rotate(0deg); // VA POR GRADOS
filter: invert(); VALOR DE 0 A 1, INVIERTE LOS VALORES, EN 0 NO INVIERTE
filter: opacity(); VA DE 0 (TRANSPARENTE) A 1 (OPACO)
filter: saturate(); VA DE 0 A 1, VALORES MAYORES SOBRESATURAN
filter: drop-shadow(); // MEJOR UTILIZAR IMAGES PNG.

Existe la opción de aplicar varios filtros.

6. Filtros múltiples a un único elemento

Se pueden añadir varios filtros simplemente dejando un espacio entre las funciones.

Ejm

filter: blur(0.1) hue-rotate(30deg) saturate(0.3) opacity(0.75)...

7. Aplicar fondos

Para ello utilizamos la propiedad backdrop-filter. Esta propiedad funciona igual que la propiedad filter, pero trabaja sobre los fondos de las cajas. Se le pueden aplicar filtros múltiples como en filter, tan sólo separando las funciones con un espacio en blanco.

Ejm

backdrop-filter: blur(0.50) hue-rotate(120deg)...

8. Crear una clase para crear de claro a oscuro

Para crear un tema light o tema dark utilizamos el filtro de la inversión. La sintaxis que tendríamos que utilizar es.

Ejm

.dark-mode {
background-color: white; // COLOR DE FONDO POR DEFECTO EN LOS NAVEGADORES
color: black; // COLOR DE LETRA POR DEFECTO EN LOS NAVEGADORES
invert(1); // INVIERTO LOS COLORES
}

9. Modos de mezcla

Vamos a superponer 2 imágenes, una sobre la otra. La propiedad que se utiliza es mix-blend-mode y el valor por defecto es normal

10. Modos de mezcla en fondos

Se utiliza la función background-blend-mode. Se utiliza para imágenes de fondo.

11. clip-path (enmascaramiento)

La propiedad clip-path va a hacer uso de 4 funciones:

circle() // DENTRO LE ESPECIFICAMOS EL RADIO
ellipse() // PODEMOS DEFINIR EL RADIO X Y EL RADIO Y
inset() //
polygon() // PARA CREAR UN POLÍGONO PODEMOS UTILIZAR EL SIGUIENTE LINK: https://bennettfeely.com/clippy/

Ejm

clip-path: circle(20px at top)
clip-path: circle(20px at left bottom)
clip-path: circle(20px at 0 0);
clip-path: circle(20px at 20% 20%);
clip-path: ellipse( 20px 30px);
clip-path: inset(1rem 2rem 3rem 3rem round 1rem); // FUNCIONA IGUAL QUE MARGIN O PADDING
clip-path: polygon(0 0, 100% 0, 50% 100%); // CREA UN TRIÁNGULO, PODEMOS AGREGAR MÁS NODOS, SI AÑADIMOS UN CUARTO VALOR

Podemos utilizar las palabras top, bottom… también porcentajes. También podemos utilizar la palabra inset. La palabra round redondea las esquinas, y puede tener hasta 4 valores, funcionando dichos valores como un margin o un padding.

12. shape-outside

Tiene las mismas funciones que clip-path menos la función inset().

13. Desplazamiento de la página

Vamos a ver un par de efectos relacionados con el desplazamiento de la página. Esto es lo que se utiliza cuando queremos hacer una sola página en nuestro sitio web. Hay una propiedad que se llama scroll-margin-top (también existen scroll-margin-left, scroll-margin-right) que lo utilizaremos para darle un enfoque elegante, es mejor utilizar ésta que utilizar margin-top. El otro efecto que vamos a utilizar es utilizar la propiedad scroll-behavior, cuyo valor por defecto es none. Se lo aplicamos directamente a la etiqueta html. Le podemos dar un valor smooth (suave).

Ejm

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      html {
        box-sizing: border-box;
        font-family: sans-serif;
        font-size: 16px;
        scroll-behavior: smooth;
      }
      *,
      *::after,
      *::before {
        box-sizing: inherit;
      }
      body,
      h1,
      h2 {
        margin: 0;
      } /* HEADER LO FIJAMOS A LA PARTE DE ARRIBA CON position: sticky */
      header {
        position: sticky;
        top: 0;
        padding: 0.25rem;
        text-align: center;
        background-color: black;
        color: white;
      }
      header a {
        margin: 01rem;
        color: #00c4d6;
      }
      header a:hover {
        color: #e94cc4;
      }
      [id] {
        scroll-margin-top: 7ex;
        padding: 30px;
      }
      .slide {
        width: 100%;
        min-height: 100vh;
        color: black;
        background-color: #1eb345;
      }
      .slide:nth-child(even) {
        background-color: antiquewhite;
      }
    </style>
    <title>Scroll</title>
  </head>
  <body>
    <header class="header">
      <h1>Scroll</h1>
      <nav class="nav">
        <a href="#section-1">Sección 1</a>
        <a href="#section-2">Sección 2</a>
        <a href="#section-3">Sección 3</a>
        <a href="#section-4">Sección 4</a>
        <a href="#section-5">Sección 5</a>
      </nav>
    </header>
    <section id="section-1" class="slide">
      <h2>Sección 1</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem iste
        rerum eaque, alias dolorum possimus sit dolorem, obcaecati, quas ipsum
        reiciendis qui. Fugit natus aut voluptate similique ratione quis quos?
      </p>
    </section>
    <section id="section-2" class="slide">
      <h2>Sección 2</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem iste
        rerum eaque, alias dolorum possimus sit dolorem, obcaecati, quas ipsum
        reiciendis qui. Fugit natus aut voluptate similique ratione quis quos?
      </p>
    </section>
    <section id="section-3" class="slide">
      <h2>Sección 3</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem iste
        rerum eaque, alias dolorum possimus sit dolorem, obcaecati, quas ipsum
        reiciendis qui. Fugit natus aut voluptate similique ratione quis quos?
      </p>
    </section>
    <section id="section-4" class="slide">
      <h2>Sección 4</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem iste
        rerum eaque, alias dolorum possimus sit dolorem, obcaecati, quas ipsum
        reiciendis qui. Fugit natus aut voluptate similique ratione quis quos?
      </p>
    </section>
    <section id="section-5" class="slide">
      <h2>Sección 5</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem iste
        rerum eaque, alias dolorum possimus sit dolorem, obcaecati, quas ipsum
        reiciendis qui. Fugit natus aut voluptate similique ratione quis quos?
      </p>
    </section>
  </body>
</html>

14. scroll-snap-type. Ajuste del desplazamiento

Vamos a aprender a hacer presentaciones tipo Powerpoint. La propiedad que vamos a usar es scroll-snap-type, que la tenemos que poner en el contenedor padre, y que recibe dos valores, el primer valor determina que eje quieres controlar, sus valores son:

x
y
inline
block
both

Su sintaxis es:

scroll-snap-type: x mandatory

Si ponemos el valor x o inline vamos a controlar el eje X. Si ponemos y o block, vamos a controlar el eje Y. Si utilizamos la palabra both queremos controlar tanto X como Y. El segundo valor que tenemos que poner es el efecto que vamos a poner, que puede ser:

mandatory
proximity

mandatory es un movimiento mas duro. Y en los elementos hijos hay que utilizar la propiedad scroll-snap-align que puede tener varios valores, entre ellos el que vamos a utilizar en el siguiente ejm, el que centra tiene el valor center.

Ejm

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      html {
        box-sizing: border-box;
        font-family: sans-serif;
        font-size: 16px;
      }
      *,
      *::after,
      *::before {
        box-sizing: inherit;
      }
      body,
      h1,
      h2 {
        margin: 0;
      }
      .slides {
        width: 100%;
        height: 100vh;
        overflow-y: scroll; /* EJE QUE QUIERO CONTROLAR */
        scroll-snap-type: blockmandatory; /* FUNDAMENTAL */
      }
      .slide {
        width: 100%;
        height: inherit;
        background-color: #1e2345;
        scroll-snap-align: center; /* FUNDAMENTAL */
      }
      .slide:nth-child(even) {
        background-color: aqua;
      }
      .slide-container {
        width: 80%;
        height: inherit;
        margin: 0auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #d98f09;
      }
      .slide-containerh2 {
        font-size: 3vw;
      }
      .slide-containerp {
        font-size: 1.5vw;
      }
    </style>
    <title>Scroll Snap</title>
  </head>
  <body>
    <main class="slides">
      <section class="slide">
        <article class="slide-container">
          <h2>Slide 1</h2>
          <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Velit
            necessitatibus inventore ut iure natus. At, a excepturi quisquam
            eligendi eum quas iusto minima unde enim sapiente, incidunt rerum
            doloremque quaerat.
          </p>
        </article>
      </section>
      <section class="slide">
        <article class="slide-container"><h2>Slide 2</h2></article>
      </section>
      <section class="slide">
        <article class="slide-container"><h2>Slide 3</h2></article>
      </section>
      <section class="slide">
        <article class="slide-container"><h2>Slide 4</h2></article>
      </section>
      <section class="slide">
        <article class="slide-container"><h2>Slide 5</h2></article>
      </section>
    </main>
  </body>
</html>

15. scroll-snap-type en horizontal (carrusel)

En este caso vamos a crear una especie de carrusel con la propiedad scroll-snap-type. Son 3 pasos los que tenemos que seguir siempre en el contenedor padre:

El contenedor padre que va a recibir los slides (tanto horizontales como verticales) tiene que tener una anchura (o una altura dependiendo de sobre lo que estemos trabajando) bien definidas.
El elemento padre, igualmente tiene que tener la propiedad overflow: scroll (tiene que tener este valor).
Por último definir los valores de scroll-snap-type: x mandatory.

Y en el contenedor hijo hay que tener lo siguiente:

Ejm

scroll-snap-align: start (por ejm)

Esto es lo que sería

/* ELEMENTO CONTENEDOR */
.carousel-container {
width: 100%;
display: grid;
grid-template-columns: repeat(5, 100%);
overflow-x: scroll;
overflow-y: hidden;
scroll-snap-type: xmandatory;
}
/* ELEMENTO HIJO */
.carousel-slide {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: aqua;
scroll-snap-align: center;
}

Ejm

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      html {
        box-sizing: border-box;
        font-family: sans-serif;
        font-size: 16px;
      }
      *,
      *::after,
      *::before {
        box-sizing: inherit;
      }
      body,
      h1,
      h2 {
        margin: 0;
      }
      .carousel {
        border: thick solid #9e8f00;
        display: flex;
        width: 50%;
        height: 50vh;
        overflow-x: hidden;
      }
      .carousel-container {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(5, 100%);
        overflow-x: scroll;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
      }
      .carousel-slide {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: aqua;
        scroll-snap-align: center;
      }
      .carousel-slide:nth-child(even) {
        background-color: aquamarine;
      }
    </style>
    <title>Carrusel con HTML y CSS</title>
  </head>
  <body>
    <section class="carousel">
      <div class="carousel-container">
        <article class="carousel-slide">
          <div class="carousel-slide-content"><h3>Slide 1</h3></div>
        </article>
        <article class="carousel-slide">
          <div class="carousel-slide-content"><h3>Slide 2</h3></div>
        </article>
        <article class="carousel-slide">
          <div class="carousel-slide-content"><h3>Slide 3</h3></div>
        </article>
        <article class="carousel-slide">
          <div class="carousel-slide-content"><h3>Slide 4</h3></div>
        </article>
        <article class="carousel-slide">
          <div class="carousel-slide-content"><h3>Slide 5</h3></div>
        </article>
      </div>
    </section>
  </body>
</html>

16. Movimiento CSS

En esta sección veremos como hacer:

transiciones
transformaciones
animaciones.

16.1 Transiciones

Las propiedades incluídas en las transiciones son:

transition-property: la propiedad de la transición.
transition-duration: cuanto tiempo dura la transición.
transition-timing-function: puede tener los valores linear ease (aceleración) ease-in (aceleración al principio) ease-out (aceleración al final) ease-in-out steps none.
transition-delay: tiempo de espera antes de que comience la transición, se habla en segundos o milisegundos.
transition: es el shorthand.

16.2 Controlar que cada propiedad tenga su propio tiempo

Hay propiedades que por su naturaleza no son posibles. Las propiedades que sí son animables o posibles las podemos encontrar en el siguiente link:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

Nota: Para que añadamos propiedades que se hagan a la vez, pero se ejecuten en distintos tiempos, tan sólo tenemos que separar por comas las propiedades que queremos incluir. IMPORTANTE: En el elemento :hover por ejm, aplicamos las propiedades que queremos cambiar, y en elemento padre incluimos las transiciones, en el siguiente ejm se puede ver como hacerlo.

Ejm

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="motion.css" />
    <title>Movimiento HTML</title>
  </head>
  <body>
    <h1>Movimiento CSS</h1>
    <section class="transitions">
      <h2>Transiciones</h2>
      <div class="box"></div>
      <article class="card">
        <img src="images/fondo.jpg" width="599px" alt="Fondo Higgs" />
      </article>
    </section>
  </body>
</html>

Y este es el código CSS

html {
  box-sizing: border-box;
  font-family: sans-serif;
  font-size: 16px;
}
*,
*::after,
*::before {
  box-sizing: inherit;
}
body,
h1,
h2 {
  margin: 0;
}
.box {
  border: thick solid black;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 5rem;
  width: 200px;
  height: 200px;
}
.card {
  border: thick solid black;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 5rem;
  width: 600px;
  height: 400ox;
}
.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 050%;
}
.transitions .box {
  background-color: magenta;
  transition-property: background-color;
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0.5s; 
  /* AHORA UTILIZAMOS LA PROPIEDAD transition EN SU SHORTHAND */ 
  /* PODEMOS INCLUIR VARIAS TRANSICIONES SEPARADAS POR COMA */
  transition: border-color 1slinear0.3s, background-color 1slinear0.3s; 
  /* AUNQUE PARA VARIAS TRANSICIONES MEJOR UTILIZAR LA PALABRA all DE LA SIGUIENTE MANERA */
  transition: all 1s ease-in-ou t0.3s;
}
.transitions .box:hover {
  background-color: aqua;
  border-color: red;
  border-radius: 10%;
}
.transitions .card {
}
.transitions .car:hover {
  opacity: 0.75;
  border-color: orchid;
  filter: blur(0.15rem);
  box-shadow: 1rem 1rem 2rem 0.5rem black;
}

La propiedad all se considera no usarla a no ser que sea necesario.

16. 3 Transformaciones

Existen 2 tipos de transformaciones:

en 2D
en 3D

Transformaciones en 2D

Hay 4 transformaciones en 2D que son las más conocidas, como son:

Traslación en X y Y: translate()
Rotación: rotate()
Escala: aumentar o disminuir el tamaño en X o en Y, o hacerlo proporcionalmente: scale()
Sesgar (skew): deformar: skew()

El valor por defecto de la propiedad transform es none. Veamos las diferentes con translate().

transform: translateX(valor) / translateY() – Podemos dar valores negativos
transform: translate(4rem, 4rem) – en X y en Y
Se pueden tomar valores porcentuales transform: translate(50%, 50%); o transform: translate(-50%, 50%);

La siguiente es scale(valor para X, valor para Y), que puede tener scaleX(), scaleY(), scaleZ() para 3D.

Ejm

transform: scale(2rem, -1rem);

La rotación puede ser positiva o negativa

Ejm

transform: rotateX(), rotateY(), rotate(), rotateZ() para 3D

Las rotaciones en X e Y no las vamos a notar, pero sí la rotación en Z. Dicha rotación va en sentido de las manecillas del reloj. Es la que vamos a utilizar en 2D ya que, como he dicho, rotación en X e Y no lo vamos a apreciar. rotateZ() y rotate() funcionan igual. skew() sólo se da en X, y tiene las opciones:

skewX()
skewY()
skew()

Ejm

transform: scale();
transform: skew();
transform: rotate();
transform: translate();
transform: matrix();

Existe otra propiedad denominada matrix(). Podemos encontrar más sobre esta función en la página de Mozilla Developer Network.

Para aplicar más de 1 transformación Para ello hacemos la siguiente sintaxis.

Ejm

transform: scale(2) rotateY(20deg) translate(20rem);

Lo separamos con un espacio en blanco y con eso es suficiente.

Transformaciones en 3D

Lo primero que tenemos que hacer es aplicar la perspectiva 3D. Veamos la sintaxis que hay que utilizar.

Ehn

transform: perspective(1000px) transformX(30rem);

Hay que utilizar la función perspective() con un valor para señalar la profundidad que queremos aplicar, en el caso anterior, le hemos dado una profundidad de 1000px. Otra manera es aplicarle la perspectiva al elemento padre.

Ejm

transform: translate3d(3rem, 30%, -3rem);

Tocaría los ejes x, y, z. También existe el atajo para scale que es la función scale3d(). Podemos ver demos en Mozilla Developer Network. La única que queda es la rotación, que en 2D no salía en X ni en Y, sólo funcionaba en Z. Tenemos una función que es rotate3d(2,3,4,45deg), hay que utilizar valores numéricos

scale3d()
translate3d()
rotate3d()
matrix3d()

Para transformaciones múltiples sólo hay que separarlas por un espacio en la misma línea transform. Esto también se hace con los filtros. Hay una propiedad que muestra el origen para nuestras transformaciones. Veamos un ejm.

Ejm

.transform-origin img {
transition: transform 2s ease;
transform-origin: x y z
/* ESTA ES LA PROPIEDAD QUE HAY QUE INCLUIR PARA CAMBIAR EL PUNTO DESDE EL CUAL NACE LA TRANSFORMACIÓN
el valor por defecto es
transform-origin: 50% 50% 0;
el transform-origin si tiene tres valores es para 3D
podemos utilizar palabras clave
transform-origin: top left / top right / top center;
}
.transform-origin img:hover {
transform: scale3d(2) // MULTIPLICA POR DOS LA IMAGEN
}

Ejercicio de transformaciones

Para ello vamos a utilizar una nueva propiedad denominada backface-visibility que puede tener dos valores: visible y hidden, hay que trabajar esta propiedad con 3D, por lo que hay que utilizar la función perspective(). Y además hay que utilizar la propiedad transform-style() que dice como se va a comportar la img en el 3D. El valor por defecto es flat, pero si le damos el valor preserve-3d los elementos hijos van a tener su propia perspectiva. Esta propiedad la colocamos, junto con la propiedad perspective() en el elemento padre o contenedor para má info ver 6:35:00

16.4 Animaciones

Para crear animaciones existe la propiedad animation: (este es el shorthand).

Ejm

animation: name duration timing-function delay iteration-count direction fill-mode;

Estos son los parámetros que podemos utilizar para la propiedad animation. De las 8 valores , las 2 primeras son obligatorias, el resto son opcionales.

animation-name: le tenemos que dar un nombre a nuestra animación
animation-duration: cuanto tiempo queremos que dure nuestra animación

Después tenemos que utilizar la palabra clave @keyframes seguida del nombre de nuestra animación, de la siguiente manera

@keyframes myanimacion {
from {
 Fotograma número 1 (como empiezan los elementos)
opacity: 0;
}
to {
 Fotograma final, como terminan los elementos.
opacity: 1;
}
}
.animacion {
animation: myanimacion 3s;
}

Hay que ver que propiedades son animables. El keyframes sería como la línea de tiempo sobre la que se mueve el fotograma Propiedades de la animación Son las siguientes:

animation-name: nombre de la animación que queramos poner
animation-duration: en segundos o milisegundos
animation-timing-function: ease, ease-in-out, linear, cubic-bezier (podemos utilizarla viéndola en la página https://cubic-bezier.com/#.17,.67,.83,.67)
animation-delay: el retraso que va a tener nuestra animación. Si le ponemos 0 no tendrá retardo
animation-iteration-count: el número de veces que se hará la animación. Tiene el valor infinite para que se de infinitas veces.
animation-direction: la animación de la dirección: tiene el valor normal, reverse, un valor llamado alternate (que va del punto inicial al final y del final al inicial) y alternate-reverse.
animation-fill-mode: hay un valor que se llama forwards que lo hace es quedarse con los estilos finales de la animación. Existe otro valor que se denomina backwards, que hace lo contrario, se queda con los estilos iniciales de la animación. Si queremos tener las ventajas de forwards y backwards tomamos el valor both.

16.5 Fotogramas intermedios en animation

Es posible que tengamos que agregar más fotogramas clave intermedios. Veamos un ejm completo.

Ejm

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      @keyframes my-animation {
        0% {
          opacity: 0;
        }
        50% {
          opacity: 0.5;
          background-color: blanchedalmond;
          transform: rotate(30deg) translate(4rem) scale(1.3);
          border-radius: 50%;
        }
        100% {
          opacity: 1;
        }
      }
      .my-animation {
        width: 300px;
        height: 300px;
        margin-left: auto;
        margin-right: auto;
        background-color: aqua;
        animation: my-animation 3s;
      }
    </style>
    <title>Animación</title>
  </head>
  <body>
    <h1>Animación</h1>
    <div class="my-animation"></div>
  </body>
</html>

A un mismo elemento le podemos aplicar varias aplicaciones, tan sólo hay que separarlas por coma como hacíamos con las transiciones.

17. Ejemplos de movimiento

17.1 Ejemplo 1 (Fade In)

En este primer ejm dejo el código de un FadeIn FadeOut

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      @keyframes fadein {
        0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
          color: yellowgreen;
        }
      }
      .fadein {
        font-size: 3vw;
        animation: fadein 2s linear infinite alternate;
      }
    </style>
    <title>Ejercicios Movimiento</title>
  </head>
  <body>
    <h1>Ejercicios Movimiento</h1>
    <h2>Fade In Fade Out</h2>
    <div class="fadein">Hola</div>
  </body>
</html>

17.2 Louder de carga (spinner)

Ejm

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      @keyframes spinner {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
      .spinner {
        width: 5vw;
        height: 5vw;
        margin-left: auto;
        margin-right: auto;
        border-radius: 50%;
        border: 0.5vw solid rgba(0, 0, 0, 0.1);
        border-left-color: #09f;
        animation: spinner 1sease-in-out infinite;
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <div class="spinner"></div>
  </body>
</html>

17.3 Efectos para botones animados (microinteracciones)

Ejm

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      .div {
        text-align: center;
      }
      .btn {
        position: relative;
        border: none;
        border-radius: 0.25rem;
        padding: 0.2;
        width: 15rem;
        height: 2.5rem;
        font-size: 1.25rem;
        font-weight: bold;
        cursor: pointer;
        overflow: hidden;
        box-shadow: 0.25rem. 25rem. 5rem. 25rem rgba(0, 0, 0, 0.15);
      }
      .anim-bottom::after {
        content: "";
        position: absolute;
        bottom: 0;
        width: 0;
        height: 0.25rem;
        background-color: red;
        transition: width 0.5s ease, left 0.5s ease, right 0.5s ease;
      }
      .anim-bottom:hover::after {
        width: 100%;
      }
      .to-left::after {
        left: 0;
      }
      .to-center::after {
        left: 50%;
      }
      .to-center:hover:after {
        left: 0;
      }
      .to-right::after {
        right: 0;
      }
    </style>
    <title>Botones animados</title>
  </head>
  <body>
    <h1>Botones animados</h1>
    <div class="div">
      <button class="btn anim-bottom to-left">Animación Izda</button>
      <button class="btn anim-bottom to-center">Animación Centro</button>
      <button class="btn anim-bottom to-right">Animación Dcha</button>
    </div>
  </body>
</html>