javascript - 旋转图像 "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;
}