防止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

如果我理解正确的话，你想缩放一个元素。但是当你这样做的时候，这个背部的一部分是在视图/窗口/身体之外的…

所以，你需要用JavaScript来做…使用JavaScript获取元素的当前比例，获取元素宽度，将宽度乘以比例。

现在，你知道缩放宽度，你可以处理它。

如果你想要一个更好的答案，给我们更多的信息，你希望元素变成什么样子