Question

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

编辑：我不是在试图知道如何旋转DIV - 我正在寻找能够在旋转之后将DIV置于指定位置（顶部和左侧）的位置。例如，在下面的图像中，触摸左边界，并从顶部定位Y像素，我需要知道如何在旋转之前定位旋转，以便在旋转后的正确位置完成。

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

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

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

解决方案可以是c＃或Javascript（首选c＃），甚至只是告诉我一个我可以应用的公式。

我一直试图这样做三天，而且我没有前进，所以如果有数学知识或有丰富经验的人能提供帮助，我将非常感激。

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

感谢。

Answer 1

检查下面的小提琴。当您单击框时，旋转的完全相同。

<强> 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 */
}

Answer 2

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

在CSS中执行此操作

如果您想在Javascript / JQuery中执行此操作，我建议您使用优秀的jQuery Rotate plugin。它受到所有主流浏览器的支持

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

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

要为轮换制作动画，您可以使用setTimeout例如：

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

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

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

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

向左或向右移动由div的高度决定。定位与以前完全相同，除了视觉宽度是高度，高度是宽度。由于它的轮换。

如果宽度未知，则css更容易通过百分比计算该问题并将文本对齐并按照我之前提到的方式调整它，但不是像素，而是使用百分比。

如果框是动态自动更新各种宽度和高度，我不知道如何正确回答这个问题。我只是在修补这个问题，看看我是否可以遇到CSS的解决方案，但没有运气。我将在Javascript中试一试，看看我是否能遇到解决方案。

绝对定位旋转的div

2 个答案: