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

【问题标题】：Rotate image "overlaps" other html elements旋转图像“重叠”其他 html 元素
【发布时间】：2015-09-14 16:31:13
【问题描述】：

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

我的代码和示例 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;
            });

【问题讨论】：

我将'z-index': '10' 放入$(optionsPreview.img).css({...}s 和it seems to do the trick。
@Teemu 在什么浏览器中你这样做？我正在使用 Chrome，当我单击向右或向左旋转时，问题保持不变
我在 FireFox 40.0.3 上，还没有在其他浏览器上测试过……确实，Chrome 上没有任何变化，IE11 无法显示滑块。

标签： javascript jquery html css rotatetransform

【解决方案1】：

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

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

【讨论】：

我已经尝试过了，但没有解决问题。如果您旋转图像并缩放它，问题保持不变（jsfiddle.net/jj03b17n/4）。

【解决方案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%',
});

参考：

【讨论】：

感谢@Kalyan Kumar S，但这并不能解决问题。当我们旋转图像时，它不能低于滑块和我在图像中显示的按钮。图像容器的“高度”必须适应变化。
检查更新的 jsfiddle (jsfiddle.net/bjLqztdw/2)。这仅适用于您的 jsfiddle 代码。如果您的案例要处理所有场景，则必须根据距离动态更改枢轴点。

【解决方案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;
});

【讨论】：