13

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)

default scale behavior
(source: w3schools.com)

Glorfindel
  • 21,988
  • 13
  • 81
  • 109
Raz
  • 8,981
  • 4
  • 19
  • 18

2 Answers2

23

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.

gion_13
  • 41,171
  • 10
  • 96
  • 108
  • Thanks! Exactly what I needed. The link is broken though (remove the trailing /) – Raz Aug 28 '12 at 07:35
0

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.

Kristian
  • 21,204
  • 19
  • 101
  • 176