たとえば、起点となる位置があって、そこから右に100px移動したところに要素があるとした場合、CSSでは位置移動には2つの方法がある。position、もしくは translate だ。この記事ではtransformを前提に話しを進める。

起点となる位置から右に100px移動した場合、それは次のように書くことができる。

translate: 100px 0;

その要素を起点から45度移動した場所はどのように指定すればよいか。
将来的にはCSSで指定できるが、ここではJavaScriptを用いた場合で考えてみる。
いわゆる三角関数を使っているわけだが、メソッドにしておけば難しい理屈を考えることなく自在に制御できるようになる。

/**
 * 起点からの長さと角度から、左右上下の移動距離を取得する
 * 
 * @param {number} deg: 起点からの角度
 * @param {number} radius: 起点からの長さ
 * @return {object} x: 左右の移動距離, y: 上下の移動距離
 */ 
const trigonometric = (deg = 0, radius = 1) => {
  return {
    x: radius * Math.round(10000 * Math.cos(deg * Math.PI / 180)) / 10000,
    y: (-1) * radius * Math.round(10000 * Math.sin(deg * Math.PI / 180)) / 10000
  }
}

起点から45度移動した場所は、JavaScriptで下記のように指定すれば取得できる。

let sample = trigonometric(45, 100)
console.log(sample.x, sample.y)   // 70.71, -70,71

つまりは、下記のようにCSSを指定すれば、起点から45度移動する。

translate: 70.71px -70.71px;

これで、好きな角度、好きな長さで、上下左右の移動位置を取得することができる、というわけだ。
実際には、JavaScriptでCSS設定をしつつ、CSS側ではアニメーション設定をすれば、ネイティブアプリのような動きもWebアプリでラクラクできる、というわけだ。

おまけ

直角二等辺三角形の三辺の長さの求め方を覚えているだろうか。1:1:√2 だ。
そしてこのサンプルでいえば、√2 が100px に相当する。つまりは、x = y かつ 1: 1: √2 = x: y : 100 という連立方程式が成り立ち、結果 x = 70.7…….となる。
このように連立方程式で解けるのは、30度、45度、60度。それ以外となるとやはり上部で紹介したメソッドが便利、となる。

参考サイト

距離と角度から座標を求める方法