0

（q）度の回転（中点を中心に変換）の後、上と左の位置が定義された位置になるように、divを配置しようとしています。

編集：DIVを回転する方法を知りたいとは思っていません-回転後にDIVを配置する場所を見つけようとしています（上と左）。たとえば、下の画像では、左の境界線に触れており、上から Y ピクセルの位置に配置されています。回転後に DIV を正しい位置に仕上げるためには、回転前に DIV を配置する方法を知る必要があります。

http://finantec.co.uk/example.png

上記の例では、回転後に表示された位置に表示されるように、「ここに配置してください」div を正しい上と左の位置に配置する式は何ですか。

任意の角度と最終位置 (上: y1、左: x1) を指定してこれを実行できるようにする必要があり、回転が適用される前に開始 (上: y、左: x) 位置を見つける必要があります。

ソリューションは、C# または Javascript (C# を推奨) で作成するか、適用できる式を教えてください。

私はこれを3日間試みてきましたが、前進していないので、数学の知識や経験が豊富な人が助けてくれると本当に感謝しています.

これが解決されれば、多くの人を助けることができると確信しています！

ありがとう。

4

2 に答える 2

0

これを CSS で使用して行うことができます。transform:rotate(30deg);

Javascript/JQuery でこれを行いたい場合は、優れたjQuery Rotate pluginを使用することをお勧めします。すべての主要なブラウザでサポートされています

* Internet Explorer 6.0 >
* Firefox 2.0 >
* Safari 3 >
* Opera 9 >
* Google Chrome

画像を回転するには、$("#image").rotate(45);(デモ) 回転する要素を特定し、回転プロパティが適用された後に角度を選択するだけです。

回転をアニメーション化するには、setTimeout例を使用できます。

setTimeout(function() { $('#myImage').rotate(30) },5)

編集：画像で達成したいことを再現するデモの例を作成しました。

#rt {
    position: absolute;
    top: 90px;
    left: -0px;
    width: 180px;
    height: 20px;}

div の幅が 200px の場合、90 度回転して配置します。最初に、それが埋め込まれている場所の中央制御点に基づいて div を回転させるため、現在の場所の 0.5 または半分下に移動する必要があります。

左または右への移動は、div の高さによって決まります。ポジショニングは以前とまったく同じですが、視覚化の幅が高さになり、高さが幅になります。回転だから。

幅が不明な場合は、css でパーセントを使用してその問題を計算し、テキストを中央に揃えて、前に述べた方法で調整する方が簡単ですが、ピクセルの代わりにパーセントを使用しています。

ボックスがさまざまな幅と高さで動的に自動更新されている場合、これに正しく答える方法がわかりません。私はこれを何度も何度もいじくり回して、CSSで解決策に出くわすことができるかどうかを確認しましたが、運はありません. Javascript で試してみて、解決策が見つかるかどうかを確認します。

于 2013-08-30T07:58:42.350 に答える
0

以下のフィドルを確認してください。ボックスをクリックすると、希望どおりに回転します。

http://jsfiddle.net/264Qx/4/

.box
{
width:200px;
height:100px;
background-color:yellow;
margin-left: 100px;
margin-top: 55px;
font-family: Arial;
}

.boxrotation
{
transform:rotate(-90deg);
-ms-transform:rotate(-90deg); /* IE 9 */
-webkit-transform:rotate(-90deg); /* Safari and Chrome */
}
于 2013-08-30T07:47:08.837 に答える