如何在CSS中从右向左缩放？ [英] How to scale from right to left in CSS?

问题描述

我正在尝试为div元素设置动画比例。但是动画从中心开始并扩散。

  .graybox {
 float：right;是从头开始并向左传播的动画吗？ 
 background-color：灰色； 
高度：100像素； 
宽度：400像素； 
行高：100px; 
 -webkit-animation：主要250ms; 
 -moz动画：主要250ms； 
 -ms动画：主要250ms； 
动画：主要250ms； 
} 
 
 @ -moz-keyframes main {
 0％{
 -moz-transform：scaleX（0）; 
} 
 100％{
 -moz-transform：scaleX（1）; 
} 
} 
  

是 50％50％，您可以将其重置为 100％50％，第一个值 100％是x-offset，并且第二个值 50％是y偏移。

要使div能够同时缩放宽度和高度，只需将 scaleX 更改为 scale 。

您还需要要设置正确的 @keyframes 语法， -moz 前缀仅适用于Firefox之类的Mozilla浏览器。我建议使用 autoprefixer 添加流行的前缀。

  .graybox {float：right;背景颜色：灰色；宽度：100％;高度：100px；行高：100px;动画：主要3s； transform-origin：100％50％;} @关键帧主{0％{transform：scale（0）; } 100％{transform：scale（1）; }}  

 < div class = graybox> < / div>  

I'm trying to animate scale a div element. But the animation starts from the center and spreads. Is it there a way animation to start from right and spread to left?

.graybox {
  float: right;
  background-color: gray;
  height: 100px;
  width: 400px;
  line-height: 100px;
  -webkit-animation: main 250ms;
  -moz-animation: main 250ms;
  -ms-animation: main 250ms;
  animation: main 250ms;
}

@-moz-keyframes main {
  0% {
    -moz-transform: scaleX(0);
  }
  100% {
    -moz-transform: scaleX(1);
  }
}

解决方案

By default the transform-origin is 50% 50%, you can reset that to 100% 50%, the first value 100% is x-offset, and the second value 50% is y-offset.

To make the div to scale for both width and height, simply change scaleX to scale.

You also need to set the correct @keyframes syntax, -moz prefix will only work on Mozilla browsers like Firefox. I suggest to use autoprefixer for adding popular prefixes.

.graybox {
  float: right;
  background-color: gray;
  width: 100%;
  height: 100px;
  line-height: 100px;
  animation: main 3s;
  transform-origin: 100% 50%;
}

@keyframes main {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

<div class="graybox"></div>

这篇关于如何在CSS中从右向左缩放？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！