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

2024-05-25

atanの使い方

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

atanと他の角度関数

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

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

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

atanは、CSSで角度を扱う際に役立つ関数です。atanを使う際には、ラジアン単位であることや、X軸とY軸の位置関係に注意する必要があります。atanと他の角度関数と組み合わせることで、様々な角度計算を行うことができます。



atan を使ったサンプルコード

円を描く

.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度になります */
}
.line::before {
  transform: translate(0, -50%) rotate(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度になります */
}

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

補足

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


CSSで角度を計算するその他の方法

transform プロパティと三角関数を使って、要素を回転、傾斜、スケーリングすることができます。以下の例では、要素を 45 度回転させます。

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

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

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

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

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

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

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

:root {
  --angle: 45deg;
}

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

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

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

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

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

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

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

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

上記以外にも、CSSで角度を計算する方法はいくつかあります。自分に合った方法を見つけて、様々なアニメーションやエフェクトを作成してください。