प्रॉपर्टी CSS3 स्केल ट्रांसफॉर्म करें लेकिन नीचे

Question

पर चिपकाएं क्या किसी को पता है कि छवि को स्केल करना है, लेकिन नीचे से चिपकना है? नीचे मेरा कोड है, मेरी छवियां मध्य में स्केल करती हैं, लेकिन मुझे उन्हें नीचे चिपकने की आवश्यकता है। तत्वों पर

.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

उपयोग transform-origincenter bottom

यहाँ 0 काम कर रहा है

यह परिवर्तन की "केन्द्र" के बिंदु को परिभाषित

Answer 2

उपयोग transform-origin संपत्ति है जिस पर एक transform लागू किया जाता है।

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

या

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

अधिक: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin