jquery - 在 -webkit-transform :scale() 之后定位元素

Question

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

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

页脚设置为bottom=0(使用foot_css)，但是当我缩放页脚时，它不会停留在bottom=0，一些文本位于屏幕下方，因此无法阅读。 编辑:这也发生在左侧，“.footer”类的左下角超出了屏幕。

那么如何将页脚“停靠”到底部呢？也许是更好的扩展方式(比 webkit 和 moz)？

Answer 1

当您使用transform:scale时，默认情况下它将在重新缩放的元素中间重新缩放。如果您想定义转换的原点，只需在 css 中添加: transform-origin:horizo​​ntalvertical; 例如

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

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