变换属性 CSS3 缩放但粘在底部
Posted
技术标签:
【中文标题】变换属性 CSS3 缩放但粘在底部【英文标题】:Transform Property CSS3 scale but stick at bottom 【发布时间】:2012-11-20 05:08:19 【问题描述】:有谁知道如何缩放图像但坚持底部? 下面是我的代码,我的图像在中间缩放,但我需要它们贴在底部。
.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);
【问题讨论】:
【参考方案1】:使用transform-origin
center bottom
这里正在工作DEMO
【讨论】:
【参考方案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
【讨论】:
谢谢,transform-origin 放在@keyframes 上? 在关键帧或 .animation_scale img... 中。我会投票给第二个选项。以上是关于变换属性 CSS3 缩放但粘在底部的主要内容,如果未能解决你的问题,请参考以下文章