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

jquery/CSS rotate hides half of the image?

本文关键字：图像 一半 隐藏 旋转 CSS jquery      更新时间：2023-09-26

我希望能够在4步旋转图像，如果用户想要它，但我有问题，因为我使用的旋转中心的图像，然后隐藏图像的一半，当我只是想让图像对齐到左边和顶部，即使旋转。我已经使用了这个脚本jqueryRotate，并看到我的意思，我在这里做了一个fiddle: 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种解决方案

但首先，让我解释一下你的问题。当使用css变换。有一个叫做transform-origin的性质，它是变换发生的点。就像你把手指放在一张纸上，然后旋转那张纸，你的手指就会成为旋转的中心。

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

现在，四种解决方案:

  1. 设置div display为inline-block。

  2. 计算原点在图像中心

  3. 旋转图像

  4. 设置div为浮动

你的意思是这样的吗?

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

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

我将你的div "rotation"的宽度固定为与你的图像相同。

相关文章：