css3 transform scale stick to bottom

css, frontend, scale, transform

Solution

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.

Problem

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)

Original source