Funciones trigonométricas CSS

Las 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 CSSDescripciónUn 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

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;
}
<div class="box"></div>

Más adelante, explicaremos tanto las animaciones CSS, como el uso de la propiedad @property que permite asignar un tipo de dato a una variable CSS.

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev