https://takao.blog/es/tags/math/Recent content in Math on Commentary of TakaoHugo -- gohugo.ioesCommentary of TakaoSun, 12 Jul 2026 04:12:51 +0900https://takao.blog/es/web/css-trig-functions/Tue, 05 Nov 2024 00:00:00 +0900https://takao.blog/es/web/css-trig-functions/<img src="https://takao.blog/img/thumbnail/css-trig-functions-es.png" alt="Featured image of post Funciones trigonométricas CSS: Matemáticas en tus hojas de estilo" /><p>CSS ha evolucionado para incluir funciones trigonométricas: <code>sin()</code>, <code>cos()</code>, <code>tan()</code>, <code>atan2()</code>, <code>asin()</code>, <code>acos()</code>. Soportadas en Chrome 111+, Firefox 108+, Safari 15.4+.</p> <h2 id="patrones-de-onda-y-oscilaciones">Patrones de onda y oscilaciones </h2><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-css" data-lang="css"><span style="display:flex;"><span>.<span style="color:#a6e22e">wave</span> { <span style="color:#66d9ef">transform</span>: translateY(calc(<span style="color:#a6e22e">sin</span>(<span style="color:#a6e22e">var</span>(<span style="color:#f92672">--</span>phase)) <span style="color:#f92672">*</span> <span style="color:#ae81ff">20</span><span style="color:#66d9ef">px</span>)); } </span></span></code></pre></div><p>Crea efectos de onda puramente CSS. Combinado con <code>@property</code> para iterar ángulos.</p> <h2 id="layouts-circulares">Layouts circulares </h2><p>Las fórmulas <code>x = cx + r * cos(angle)</code> y <code>y = cy + r * sin(angle)</code> permiten layouts circulares sin JavaScript. Power menús radiales, gráficos de donut, órbitas.</p>