在 -webkit-transform:scale() 之后定位项目

Posted 2023-02-24

【中文标题】在 -webkit-transform:scale() 之后定位项目

【英文标题】：Positioning item after -webkit-transform:scale()

【发布时间】：2012-09-24 16:18:48

【问题描述】：

我正在尝试使用 jQuery 自动化 css 设置，我有类似的功能

$(".footer").css(foot_css)//pre-defined css object
//AND
$(".footer").hover(function()
$(this).css("-webkit-transform", "scale(2)"); 
);

页脚设置为底部=0（使用foot_css），但是当我缩放页脚时，它不会停留在底部=0，一些文本位于屏幕下方，因此无法阅读。 编辑：这也发生在左边，“.footer”类的左下角不在屏幕上。

那么我怎样才能将页脚“停靠”到底部？也许是一种更好的扩展方式（比 webkit 和 moz）？

【参考方案1】：

当您使用transform:scale 时，默认情况下它会在您重新缩放的元素中间重新缩放。如果您想定义转换的来源，只需在您的 css 中添加：transform-origin: horizontal vertical; 例如

.myScaledObj
   -webkit-transform: scale(0.5);
   -webkit-transform-origin: 50% 0%; 

这将重新缩放您的对象，变换的原点位于其顶部中间