html – 如何在缩放动画中保持原点位于图像中心？

概述我有一个类似于这个 fiddle的情况,我有一个CSS3动画,可以缩放绝对位于另一个元素中心的元素.但是,当动画发生时,它偏离中心,如示例中相对于蓝色的红色方块所示.我该如何居中？我已经尝试了一些围绕transform-origin属性的配置,但这并没有产生正确的结果. 代码如下： @-webkit-keyframes ripple_large { 0% {-webkit-transform: 我有一个类似于这个 fiddle的情况,我有一个CSS3动画,可以缩放绝对位于另一个元素中心的元素.但是,当动画发生时,它偏离中心,如示例中相对于蓝色的红色方块所示.我该如何居中？我已经尝试了一些围绕transform-origin属性的配置,但这并没有产生正确的结果.

代码如下：

@-webkit-keyframes ripple_large {  0% {-webkit-transform:scale(1);}  75% {-webkit-transform:scale(3); opacity:0.4;}  100% {-webkit-transform:scale(4); opacity:0;}}@keyframes ripple_large {  0% {transform:scale(1); }  75% {transform:scale(3); opacity:0.4;}  100% {transform:scale(4); opacity:0;}}.container {  position: relative;  display: inline-block;  margin: 10vmax;}.cat {  height: 20vmax;}.center-point {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%,-50%);  height: 10px;  wIDth: 10px;  background: blue;}.to-animate {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%,-50%);  border: 1px solID red;  height: 5vmax;  wIDth: 5vmax;  transform-origin:center;}.one {  -webkit-animation: ripple_large 2s linear 0s infinite;  animation: ripple_large 2s linear 0s infinite;}.two {  -webkit-animation: ripple_large 2s linear 1s infinite;  animation: ripple_large 2s linear 1s infinite;}

解决方法 问题是你正在删除翻译转换.

当您指定新转换(动画内部的转换)时,它会覆盖第一个转换,因此您需要将它们添加到同一转换属性中.在您的情况下,您将删除修复中心对齐的翻译：

@keyframes ripple_large {  0% {    transform: translate(-50%,-50%) scale(1) ;  }  75% {    transform: translate(-50%,-50%) scale(3) ;    opacity: 0.4;  }  100% {    transform:translate(-50%,-50%)  scale(4) ;    opacity: 0;  }}.container {  position: relative;  display: inline-block;  margin: 10vmax;}.cat {  height: 20vmax;}.center-point {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%,-50%);  height: 10px;  wIDth: 10px;  background: blue;  transform-origin:center;}.to-animate {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%,-50%);  border: 1px solID red;  height: 5vmax;  wIDth: 5vmax;}.one {  -webkit-animation: ripple_large 2s linear 0s infinite;  animation: ripple_large 2s linear 0s infinite;}.two {  -webkit-animation: ripple_large 2s linear 1s infinite;  animation: ripple_large 2s linear 1s infinite;}

<div class='container'>  <img src='http://www.catster.com/wp-content/uploads/2017/08/PixIEbob-cat.jpg' class='cat'>  <div class='center-point'>  </div>  <div class='to-animate one'></div>  <div class='to-animate two'></div></div>

UPDATE

如评论所述,最好使用除翻译之外的其他方法来居中您的元素以避免更改动画,因为这可以与其他元素一起使用.

总结

以上是内存溢出为你收集整理的html – 如何在缩放动画中保持原点位于图像中心？全部内容，希望文章能够帮你解决html – 如何在缩放动画中保持原点位于图像中心？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。