Question

我想通过单击按钮来旋转图像，但是当我这样做时，图像会与按钮重叠。我怎么能这样做？

我的代码和示例 here（http://jsfiddle.net/jj03b17n/5/）。

发生了什么：

我想要的是什么：

JS轮换代码：

        $(optionsPreview.rotateRightBt).unbind("click").click(function () {
                var deg = $(optionsPreview.img).data('rotate') || 0;

                if (deg == 0) deg = 90;
                else deg = deg + 90 == 360 ? 0 : deg + 90

                $(optionsPreview.img).data('rotate', deg);

                var rotate = 'rotate(' + deg + 'deg)';
                $(optionsPreview.img).css({
                    '-webkit-transform': rotate,
                    '-moz-transform': rotate,
                    '-o-transform': rotate,
                    '-ms-transform': rotate,
                    'transform': rotate
                });
                return false;
            });

Answer 1

您可以通过获取图像的当前大小来使用jQuery设置margin-top .tdBarPreview，例如，如果图像根本没有缩放，那么以下内容将起作用，现在当图像被缩放，获取其大小并相应地更改以下margin-top属性。

.tdBarPreview
{ 
    display:block;
    margin-top:20px;
}

Answer 2

@Ninita，当您尝试使用css rotate旋转元素时，旋转的旋转位于元素的中心。如果你查看你的jsfiddle代码（http://jsfiddle.net/bjLqztdw/），旋转的旋转点位于黄色“O”所在位置的中心。

您可以更改枢轴的位置，以便旋转根据枢轴位置而变化。

要更改枢轴位置，您必须使用“-webkit-transform-origin”样式。

更新了您的JSfiddle（http://jsfiddle.net/bjLqztdw/1/）。您可以尝试更改轴心点。

$(optionsPreview.img).css({
 '-webkit-transform': rotate,
 '-moz-transform': rotate,
 '-o-transform': rotate,
 '-ms-transform': rotate,
 'transform': rotate,
 '-webkit-transform-origin': '90% 30%',
});

参考：

Answer 3

解决！我使用JS将图像容器高度更改为旋转。因此，当图像处于垂直位置时，图像容器高度会更改为图像宽度。像这样（JSFiddle）：

$(optionsPreview.rotateRightBt).unbind("click").click(function () {
    var deg = $(optionsPreview.img).data('rotate') || 0;

    if (deg == 0) deg = 90;
    else deg = deg + 90 == 360 ? 0 : deg + 90

    $(optionsPreview.img).data('rotate', deg);

    var rotate = 'rotate(' + deg + 'deg)';
    $(optionsPreview.img).css({
        '-webkit-transform': rotate,
        '-moz-transform': rotate,
        '-o-transform': rotate,
        '-ms-transform': rotate,
        'transform': rotate
    });

    if (deg == 90 || deg == 270) {
        var width = $(optionsPreview.img).width();
        $($(optionsPreview.img).parent()).css("height", width + "px");
    }
    else
        $($(optionsPreview.img).parent()).css("height", "auto");

    return false;
});

旋转图像“重叠”其他html元素

3 个答案: