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获取元素的当前比例，获取元素宽度，按比例乘以宽度。

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

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

防止CSS转换元素离开屏幕

1 个答案: