CSSでアニメーションやエフェクトを自由自在に！atan関数で角度を計算するテクニック

atanの使い方

atan(y / x);

• x: X軸の値
• y: Y軸の値

atanの注意点

• atanは、X軸とY軸が重なっている場合や、X軸とY軸が反対方向を向いている場合、意図した結果にならない場合があります。
• atanはラジアン単位で角度を返します。度数に変換するには、atan(y / x) * 180 / Math.PIのように計算する必要があります。

atanの例

.element {
  transform: rotate(atan(100 / 50)); /* X軸とY軸の正接値が2なので、角度は45度になります */
}

atanと他の角度関数

CSSには、atan以外にも角度を扱う関数があります。

• radians: 度数をラジアン値に変換します。
• degrees: ラジアン値を度数に変換します。
• asin: 2つの点間の弧の正弦値(sin)から角度値をラジアン単位で返します。
• acos: 2つの点間の弧の余弦値(cos)から角度値をラジアン単位で返します。

これらの関数を組み合わせて、様々な角度計算を行うことができます。

---

円を描く

.circle {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  border-radius: 50%;
  position: relative;
}

.circle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background-color: #f00;
  border-radius: 50%;
}

.circle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25px;
  height: 25px;
  background-color: #fff;
  border-radius: 50%;
}

このコードは、赤い円と白い円を重ねて表示します。赤い円は atan を使って、白い円の中心から任意の位置に回転させています。

.circle::before {
  transform: translate(-50%, -50%) rotate(atan(50 / 50)); /* X軸とY軸が重なっているので、角度は0度になります */
}

このコードでは、赤い円を白い円の中心に配置しています。atan の引数に 50/50 を指定することで、X軸とY軸の正接値が 1 になるので、角度は 0 度になります。

線を描く

.line {
  width: 100px;
  height: 1px;
  background-color: #000;
  position: relative;
}

.line::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100px;
  height: 1px;
  background-color: #f00;
  transform: translate(0, -50%) rotate(atan(50 / 100)); /* X軸とY軸の正接値が0.5なので、角度は30度になります */
}

このコードは、赤い線を描きます。赤い線は atan を使って、任意の角度に回転させています。

.line::before {
  transform: translate(0, -50%) rotate(atan(50 / 100)); /* X軸とY軸の正接値が0.5なので、角度は30度になります */
}

このコードでは、赤い線を 30 度回転させています。atan の引数に 50/100 を指定することで、X軸とY軸の正接値が 0.5 になるので、角度は 30 度になります。

.shape {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  position: relative;
}

.shape::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(atan(100 / 50)); /* X軸とY軸の正接値が2なので、角度は45度になります */
}

このコードは、四角形を 45 度回転させています。

.shape::before {
  transform: translate(-50%, -50%) rotate(atan(100 / 50)); /* X軸とY軸の正接値が2なので、角度は45度になります */
}

このコードでは、四角形を 45 度回転させています。atan の引数に 100/50 を指定することで、X軸とY軸の正接値が 2 になるので、角度は 45 度になります。

これらの例は、atan を使って様々な角度計算を行う方法を示しています。atan を理解することで、CSS でより複雑なアニメーションやエフェクトを作成することができます。

• atan はラジアン単位で角度を返します。度

---

.element {
  transform: rotate(45deg);
}

また、三角関数を使って、より複雑な変換を計算することもできます。以下の例では、要素を X 軸方向に 50 ピクセル移動し、30 度回転させます。

.element {
  transform: translateX(50px) rotate(30deg);
}

calc() 関数

calc() 関数を使って、角度を含む式を計算することができます。以下の例では、要素の幅を角度に基づいて動的に設定します。

.element {
  width: calc(100px * cos(45deg));
}

このコードは、要素の幅を 100 ピクセル * cos(45 度) に設定します。つまり、要素の幅は 70.71 ピクセルになります。

カスタムプロパティ

カスタムプロパティを使って、角度を値として格納し、再利用することができます。以下の例では、カスタムプロパティ --angle を定義し、それを要素の回転に使用します。

:root {
  --angle: 45deg;
}

.element {
  transform: rotate(var(--angle));
}

このコードは、要素を --angle の値である 45 度回転させます。

JavaScript

JavaScript を使って、CSS に動的に角度を挿入することができます。以下の例では、JavaScript を使って要素を回転させる角度をランダムに生成します。

const element = document.querySelector('.element');
const angle = Math.random() * 360;

element.style.transform = `rotate(${angle}deg)`;

このコードは、.element クラスを持つ要素をランダムな角度で回転させます。

CSS で角度を計算するには、様々な方法があります。それぞれのアプローチには長所と短所があるので、要件に合わせて適切な方法を選択する必要があります。

• JavaScript: 動的に角度を挿入できる
• カスタムプロパティ: 角度を値として格納し、再利用できる
• calc() 関数: より複雑な計算が可能
• transform プロパティと三角関数: シンプルで使いやすい