Funciones sin(), cos() y tan()

Recientemente se han añadido una serie de funciones CSS que permiten realizar calculos trigonométricos básicos sin necesidad de utilizar Javascript. Esto nos da una gran cantidad de posibilidades a la hora de realizar tareas geométricas e incluso animaciones.

Funciones trigonométricas CSS

Las funciones CSS trigonométricas disponibles actualmente son las siguientes:

Función CSS	Descripción	Un ejemplo
`sin()`	Función matemática seno.	`sin(45deg) ~ 0.8509`
`cos()`	Función matemática coseno.	`cos(45deg) ~ 0.5253`
`tan()`	Función matemática tangente.	`tan(45deg) ~ 1.6197`
`asin()`	Función matemática arcoseno.	`asin(-1) ~ -PI/2`
`acos()`	Función matemática arcocoseno.	`acos(-1) ~ PI`
`atan()`	Función matemática arcotangente.	`atan(-1) ~ -PI/4`
`atan2()`	Función matemática arcotangente de 2 parámetros.	`atan2(90, 90) ~ PI/4`

La forma de utilizarlas es muy similar a funciones que ya hemos visto anteriormente, como calc(), min() o round():

.box {
  width: calc(sin(45deg) * 100px);      /* 70.7px */
  height: 100px;
  background: indigo;
}

<div class="box"></div>

En este ejemplo, hemos realizado la siguiente operación:

Seno de 45deg = 0.7071
0.7071 * 100px = 70.71px

El soporte de las funciones trigonométricas ya es bueno en navegadores modernos:

Animaciones con trigonometría

Sin embargo, esto puede ser más interesante si lo mezclamos con animaciones CSS. Veamos un ejemplo un poco más complejo, donde utilizamos la propiedad animation de CSS y la regla @property para darle un tipo de dato a una variable CSS:

1️⃣ El cuadrado .box tiene un tamaño de 50x50 píxels.
2️⃣ Mediante una animación CSS, aumentamos la variable --value de 0 a 75.
3️⃣ Le damos un tipo de dato numérico con @property para que sea animable.
4️⃣ En --x multiplicamos por 10px el número --value, para convertirlo en píxels y aumentarlo un poco.
5️⃣ En --y calculamos el seno del valor de --value, multiplicado por 10px.

.box {
  --size: 50px;
  --x: calc(var(--value) * 10px);
  --y: calc(sin(calc(var(--value))) * 10px);

  width: var(--size);
  height: var(--size);
  background: indigo;
  animation: move 10s linear infinite alternate;
  transform: translate(var(--x), var(--y));
}

@keyframes move {
  0% { --value: 0 }
  100% { --value: 75 }
}

@property --value {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}