オブジェクトに回転率を持たせる方法はありますか？

Question

以下のGIFに従って、ウィンドウサイズを増減するにつれてわかるように、左のイメージは、それが想定されているように大きくなり縮小します。私が作ったのは、私が設定した "イメージラッパー"の中の行です。ここでの私の目標は、画像が縮小するときです。私は右に見られる尊敬されるテキストブロックとラインの並びを持っています。今私はleftとtopのパーセント値でabsoluteと位置付けられた行を持っています。達成しようとしている行の回転を調整する方法はありますか？どのようにしても、その行をタイトルと整列させるにはどうすればよいですか？ローテーションでパーセンテージを使用できますか？ （私はそうは思わない）

これは私の懸念を提起する。確かに、CSSのみのソリューションは素晴らしいかもしれませんが、関心はブラウザとの互換性です。解決策がJavaScriptでも可能であれば完璧ですが、JSの場合はどこから始めるべきかわかりません。

その他のご提案は歓迎します。

GIF例：使用

コード例：https://jsfiddle.net/01sxrjkr/ *プレビューウィンドウは、あなたがラインの間違った端から回転している< 768px

Answer 1

であることを確認してください。代わりにこれを試してから、最も一般的なメディア幅ごとに右のテキストに関連して回転数を変更するためにメディアクエリを使用してください。覚えておいて、人々はスクリーンのサイズを変更しないので、幅のピクセルごとに完璧にする必要はなく、実際に行っていることでは不可能です。あなたはイメージに反応しており、あなたのテキストは当然ではありません。そのため、画面の幅が縮小されるにつれて、左の列の高さは画像のサイズが小さくなるにつれて小さくなり、右の列の幅が大きくなるにつれて、テキストの折り返しが多くなります。質問自体に**それを再現するために必要な最短のコードが含まれている必要があり、コードの助けを求める

.line.line-1 { 
    left: 62%; 
    top: 39%; 
    transform: rotate(14deg); 
    width: 40%; 
}