防止 CSS 变换元素离开屏幕答案

【问题标题】：Prevent CSS transform elements from going off screen防止 CSS 变换元素离开屏幕
【发布时间】：2014-08-25 06:59:27
【问题描述】：

我有两列框，我正在使用 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 类？

【问题讨论】：

请包含您的相关 HTML
好的，我刚做了。谢谢。
可以使用transform: translate(X,Y)来改变元素的渲染位置。
你也可以使用transform-origin设置变换的原点，让右列元素只向左缩放，左列元素只向右增长（同样你可以设置对于垂直轴）jsfiddle ...还有...恕我直言，仅用于悬停 js 有点矫枉过正，你不觉得吗？
这行得通，但我希望左边的框向右移动，右边的框向左移动。也许实现这一点的最好方法是拥有一个.transition-left 和.transition-right 类，并根据盒子是在右边还是左边找出如何动态应用每个类...

标签： jquery css

【解决方案1】：

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

所以，你需要用 JavaScript 来做到这一点...... 使用JavaScript获取元素当前的缩放比例，获取元素宽度，宽度乘以缩放比例。

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

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

【讨论】：