javascript - ボックスのサイズ変更のためのかなり複雑な三角法

Question

四隅すべてからボックスのサイズを変更する機能を実現しようとしています。これは非常に簡単ですが、回転する機能とアンカーを保持する機能も必要です (まともな写真編集ソフトウェアのように)。考えすぎかもしれませんが、次のようにアンカーをロックするには複雑なトリガーが必要であることがわかりました。

http://jsfiddle.net/andrewplummer/W8tyB/1/

明確にするために、コードには実際には複数のボックスはありません...さまざまなボックスは、さまざまなコーナーからさまざまなサイズにサイズ変更された1つのボックスを表すと想定されています。

この例は 45 度で非常に単純ですが、私が最終的に望むのは、任意のサイズのボックス (もちろん正方形だけでなく長方形も) の位置 (左、上) を取得できるようにするトリガーです。その上で。

直接のヘルプを歓迎しますが、この問題に答える質問を作成する方法に関するブログ投稿があれば、さらに役立つかもしれません!

完全なコード:

<div id="box1"></div>

<!-- Resizing to 40x40 with the anchor at the top -->
<div id="box2"></div>
<!-- Resizing to 30x30 with the anchor at the top -->
<div id="box3"></div>

<!-- Resizing to 40x40 with the anchor at the left -->
<div id="box4"></div>
<!-- Resizing to 30x30 with the anchor at the left -->
<div id="box5"></div>

#box1 {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background: rgba(0,0,0,0.2);
  -webkit-transform: rotateZ(45deg);
}

#box2 {
  position: absolute;
  top: 38px;
  left: 79px;
  width: 40px;
  height: 40px;
  background: rgba(255,0,0,0.2);
  -webkit-transform: rotateZ(45deg);
}

#box3 {
  position: absolute;
  top: 34px;
  left: 87px;
  width: 30px;
  height: 30px;
  background: rgba(255,0,0,0.2);
  -webkit-transform: rotateZ(45deg);
}

#box4 {
  position: absolute;
  top: 79px;
  left: 38px;
  width: 40px;
  height: 40px;
  background: rgba(0,0,255,0.2);
  -webkit-transform: rotateZ(45deg);
}

#box5 {
  position: absolute;
  top: 84px;
  left: 36px;
  width: 30px;
  height: 30px;
  background: rgba(0,0,255,0.2);
  -webkit-transform: rotateZ(45deg);
}