0

我正在尝试定位一个 div，以便在旋转 (q) 度（围绕中点变换）后，顶部和左侧位置处于定义的位置。

编辑：我不想知道如何旋转 DIV - 我试图找出 DIV 的位置，以便在旋转后它处于指定位置（顶部和左侧）。例如，在下图中，触摸左边框并从顶部定位 Y 像素，我需要知道如何在旋转之前定位 DIV 以使其在旋转后在正确的位置完成。

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

那么在上面的示例中，将“请把我放在这里”的 div 定位在正确的顶部和左侧位置的公式是什么，以便在旋转后出现在显示的位置。

在给定任何角度和任何最终位置（顶部：y1，左侧：x1）的情况下，我需要能够做到这一点，并且我需要在应用旋转之前找到起始（顶部：y，左侧：x）位置。

解决方案可以是 c# 或 Javascript（首选 c#），甚至只是让我知道我可以应用的公式。

我已经尝试了三天，但我没有继续前进，所以如果有很强的数学知识或经验的人能提供帮助，我将不胜感激。

如果解决了，我相信这可以帮助很多人！

谢谢。

4

2 回答 2

0

您可以在 CSS 中使用transform:rotate(30deg);

如果您想在 Javascript/JQuery 中执行此操作，我建议您使用出色的jQuery Rotate 插件。所有主流浏览器都支持它

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

要旋转图像，您需要做的就是$("#image").rotate(45);( Demo ) 确定要旋转的元素，并在应用了旋转属性后选择度数，就这么简单。

要为旋转设置动画，您可以使用setTimeoutex：

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

编辑：我做了一个示例演示，重新创建您想要在图像中实现的目标。

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

如果您的 div 宽度为 200px，并且您将其旋转 90 度以定位它。您首先需要将其向下移动 0.5 或一半，因为它会根据其嵌入位置的中央控制点旋转 div。

将其向左或向右移动由 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 回答