Question

如果用户需要，我希望能够以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>

Answer 1

有4个解决方案。

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

现在你正在转动div display:block。这意味着它有100％的宽度，高度等于他的内容。知道默认transform-origin值为50％，这就是为什么它会像那样旋转。

现在，4个解决方案：

将div display设置为inline-block。这会将宽度调整为其内容。
计算原点位于图像的中心。
旋转图像
让div浮动

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

Answer 2

你的意思是这样吗？

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

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

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

jquery / CSS旋转隐藏了图像的一半？

2 个答案: