jquery - 防止 CSS 转换元素离开屏幕

Question

我有两列框，我正在使用 jQuery 在悬停时添加以下类:

.transition {
    -webkit-transform: scale(1.2); 
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}

HTML 看起来像这样:

<div class="expand">
    content...
</div>

jQuery 是这样的:

$(document).ready(function(){
    $('.expand').hover(function() {
        $(this).addClass('transition');
    }, function() {
        $(this).removeClass('transition');
    });
});

问题是，当框缩放时，它的一部分会被切断，因为它离开了屏幕(左列中的框在左侧被切断，右列中的框在右侧被切断)。我需要的是让框缩放并稍微向屏幕中心移动。我一直在搞乱在悬停时更改 margin 属性，但是当一个框移动时，它会将它旁边的框推到下一行。

所以基本上我需要元素缩放，稍微向中心移动，这样盒子就不会被切断，并且从屏幕(Z-index？)出来，这样它就不会取代相邻的盒子。

这可能吗？也许我应该尝试一种不同的方法，比如使用 jQuery 插件，而不是仅仅使用 jQuery 来附加 CSS 类？

Answer 1

如果我没理解错的话，你想要缩放一个元素。但是当你这样做的时候，这个背部的一部分在 View /窗口/ body 之外......

因此，您需要使用 JavaScript 来做到这一点...使用JavaScript获取元素当前比例，获取元素宽度，宽度乘以比例。

现在，您知道了缩放后的宽度，您可以处理它了。

如果您想要更好的答案，请向我们提供有关您希望该元素变成什么样子的更多信息。