旋转图像 "overlaps" 其他 html 个元素

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 设置 .tdBarPreview 的 margin-top，例如，如果图像根本没有缩放，则以下会工作，现在当图像被缩放时，获取它的大小并相应地更改以下 margin-top 属性。

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

Answer 2

@Ninita，当您尝试使用 css 旋转来旋转元素时，旋转的轴心位于元素的中心。如果您查看您的 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;
});

旋转图像 "overlaps" 其他 html 个元素

Rotate image "overlaps" other html elements

html

javascript

css

jquery

rotatetransform