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.