在-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: horizontal vertical;

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

这将重新缩放对象，使变换的原点位于对象的中上部。