CSS3变换缩放保持底部对齐

Question

在将元素使用 transform:scale(x) 属性进行缩放时，是否可能使该元素保持在页面底部位置不动？（默认情况下，如果不指定中心点，元素会以自身中心为基准点进行缩放，如下图所示）

_{（图片来源：w3schools.com）}

- Raz

Answer 1

使用 transform-origin 属性：

element{
    -webkit-transform : scale(0.5);
    -moz-transform : scale(0.5);
    -o-transform : scale(0.5);
    -ms-transform : scale(0.5);
    transform : scale(0.5);

    -webkit-transform-origin : 50% 100%;
    -moz-transform-origin : 50% 100%;
    -o-transform-origin : 50% 100%;
    -ms-transform-origin : 50% 100%;
    transform-origin : 50% 100%;
}

这里有一个实时演示，展示了transform-origin的作用。链接

- gion_13

---

谢谢！正是我需要的。不过链接有问题（去掉末尾的/）。 - Raz

Answer 2

问题是你是否可以选择对象的轴。我不知道答案，但我猜想可能不行。

如果你真的不能设置“轴”，那么你必须在同时移动盒子时进行变换。

- Kristian