Web制作
CSSの三角関数を使ったサンプル（随時更新中）

CSSの三角関数を使ったサンプル（随時更新中）

2023.11.07

最近追加されたCSSの一つに、三角関数（sin()、cos()など）があります。ただ、登場してそれほど経ってないので、あまりサンプルなどは見かけないのですが、自分の練習のため、いくつかサンプルをまとめてみました。

ですが、作ってみた感想として、そこまで使えるかというとそんなことはなさそうで、あまり使用頻度は高くないような気がします。

cos()、sin()の基礎について

cos()、sin()の基本的な仕様については、こちらのサイトを参照してもらうとわかりやすいと思います。

CSSの三角関数を理解しよう！sin()とcos()でできる表現

あと、自分が作成したサンプルもこの参考サイトの内容をベースにしており、初級というよりは中級以上の難易度になるかと思います。

曲線に沿って、文字を配置するサンプル

最初のサンプルは、曲線に沿って文字を配置するサンプルです。まずは、こちらが完成図と、デモページへのリンクになります。

曲線に沿って、文字を配置させるサンプル

sin()を使って、曲線を設定

このように文字を配置したい場合、Illustratorのようなソフトでパスを作成し、それに沿って配置するのが楽なのですが、少なくとも今はそのような機能はありません。

そこで、このサンプルでは、一文字一文字にpositionで位置を指定し、その際に、上下方向（Y軸）に対してsin()を用いて位置を設定します。

コードを使って説明

次に、部分的に抜粋・編集したHTMLがこちらです。

<style>  
h1 {
    position: relative;
    width: 100%;
    }
h1 span {
    position: absolute;
    color: #f6ff00;
    }
</style>
<h1>
    <span style="top: 0px; left: 0px;">a</span>
    <span style="top: calc(sin(15deg) * 40px); left: 10%;">b</span>
    <span style="top: calc(sin(30deg) * 40px); left: 20%;">c</span>
    <span style="top: calc(sin(45deg) * 40px); left: 30%;">d</span>
    <span style="top: calc(sin(60deg) * 40px); left: 40%;">e</span>
</h1>

文字を自由に配置させるため、一文字ずつspanタグでマークアップし、個々のspanタグに位置を設定します。また、自由な配置にしたいので、「position:absolute;」を使っています。ポイントは、sin()、cos()は最大数が1なので、そのままでは数字が小さすぎます。そのため、数値を増やすため「40px」を掛けています。

あと、これはCSSの三角関数とは関係ないのですが、一文字ずつ手作業でマークアップするのは大変なので、今回のサンプルではJavaScriptを用いています。ですので、ソースコード上ではspanタグでマークアップされていないのですが、ブラウザの検証などで見てもらうと、実際の数値を確認できると思います。