css3 transform scale stick to bottom

Question

Is it possible to use the transform: scale(x) property while keeping the element stuck to the bottom of the page? (by default if scales relative to the center of the element as shown below)

_{(source: w3schools.com )}

Answer 1

use the transform-origin property :

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%;
}

Here's a live demo that shows the transform-origin in action.

Answer 2

the question is whether you can choose what the axis is for an object. i dont know the answer to this and i'm guessing its probably not.

if you really cant set the "the axis" you'll have to transform the box while moving it simultaneously.