トランスフォームのプロパティ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が塗布された要素にtransform-originプロパティを使用。

これは、変換の "中央" のポイントを定義しています

-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