0

如果用户需要，我希望能够分 4 步旋转图像，但是我遇到了问题，因为我使用的旋转使图像居中，然后当我只想让图像与左侧对齐时隐藏图像的一半并到顶部，即使旋转。我已经使用了这个脚本jqueryRotate并看看我的意思是我在这里做了一个小提琴：http: //jsfiddle.net/sqnsA/

如您所见，它在垂直旋转图像时将图像与中心对齐，是否有办法使用 css 或 javascript 使其与顶部和左侧对齐。这是我的 JavaScript：

var angle = 0;
$('#rotate').click(function(e) {
    e.preventDefault();

    if (angle === 0) {
        $("#rotation").rotate(90);
    }
    if (angle === 1) {
        $("#rotation").rotate(180);
    }
    if (angle === 2) {
        $("#rotation").rotate(270);
    }
    if (angle === 3) {
        $("#rotation").rotate(360);
        angle = -1;
    }

    angle++;

});

这是我的 HTML

<div style="position: relative;top: 0px;left: 0px;" id="rotation">
<img src="myimage.jpg" style="position: relative;max-height: 275px;max-width: 356px;" id="rotan"/>
</div>

<a href="" id="rotate">Rotate</a>
4

2 回答 2

2

有4个解决方案。

但首先，让我解释一下你的问题。使用 css 转换时。有一个称为transform-origin至极的属性，它是发生转换的点。就像你把你的手指放在一张纸上并旋转那张纸，你的手指将成为旋转中心。

现在你正在旋转一个divwich 是一个display:block. 这意味着它有 100% 的宽度并且高度等于他的内容。知道默认transform-origin值为 50%，这就是它这样旋转的原因。

现在，4个解决方案：

  1. 将 div 设置display为inline-block. 这将根据其内容调整宽度。

  2. 计算原点位于图像的中心。

  3. 旋转图像

  4. 使 div 浮动

这里有一些关于transform-origin 的信息。

于 2013-05-15T13:22:37.950 回答
0

你的意思是这样的吗？

http://jsfiddle.net/bikiew/sqnsA/1/

<div style="position: relative;top: 0px;left: 0px; width:365px;" id="rotation">

我将您的 div“旋转”的宽度固定为与您的图像相同。

于 2013-05-15T13:20:34.293 回答