Chuyển đổi quy mô CSS3 thuộc tính nhưng dính ở dưới cùng

Question

Có ai biết cách chia tỷ lệ hình ảnh nhưng gắn với đáy không? Dưới đây là mã của tôi, quy mô hình ảnh của tôi ở giữa, nhưng tôi cần chúng ở phía dưới.

.animation_scale{ 
position:absolute; 
top:150px; 
left:55px; 
display:block; 
z-index:-10; 
bottom : 0;} 

.animation_scale img{ 
animation-name:animation_scale; 
animation-duration:1s; 
animation-timing-function:ease; 
animation-delay:0s; 
animation-iteration-count:1; 
animation-direction:alternate; 
animation-play-state:running; 
animation-fill-mode: forwards; 

    /* Firefox: */ 
-moz-animation-name:animation_scale; 
-moz-animation-duration:1s; 
-moz-animation-timing-function:ease; 
-moz-animation-delay:0s; 
-moz-animation-iteration-count:1; 
-moz-animation-direction:alternate; 
-moz-animation-play-state:running; 
-moz-animation-fill-mode: forwards; 

/* Safari and Chrome: */ 
-webkit-animation-name:animation_scale; 
-webkit-animation-duration:1s; 
-webkit-animation-timing-function:ease; 
-webkit-animation-delay:0s; 
-webkit-animation-iteration-count:1; 
-webkit-animation-direction:alternate; 
-webkit-animation-play-state:running; 
-webkit-animation-fill-mode: forwards;} 

@keyframes animation_scale { 
0% { 
-webkit-transform: scale(0.2) translate(0px); 
-moz-transform: scale(0.2) translate(0px); 
-o-transform: scale(0.2) translate(0px);} 

100% { 
-webkit-transform: scale(1.0) skew(0deg) translateY(-10px); 
-moz-transform: scale(1.0) skew(0deg) translateY(-10px); 
-o-transform: scale(1.0) skew(0deg) translateY(-10px);}} 

@-moz-keyframes animation_scale /* Firefox */ 
{0% { 
-moz-transform: scale(0.2) translate(0px);} 

100% { 
-moz-transform: scale(1.0) translateY(-10px);}} 

@-webkit-keyframes animation_scale{ /* Safari and Chrome */ 

0% { 
-webkit-transform: scale(0.2) translate(0px);} 

100% { 
-webkit-transform: scale(1.0) translateY(-10px);}} 

Answer 1

Sử dụng transform-origincenter bottom

đây đang làm việc DEMO

Answer 2

Sử dụng transform-origin thuộc tính trên các thành phần được áp dụng transform.

Nó định nghĩa các "trung tâm" điểm việc chuyển đổi:

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

hoặc

-webkit-transform-origin: center bottom; 
-moz-transform-origin: center bottom; 
-o-transform-origin: center bottom; 
transform-origin: center bottom; 

Xem thêm: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin