html - 在动画中调整 div 大小时变换原点问题-6ren

html - 在动画中调整 div 大小时变换原点问题

转载作者：行者123 更新时间：2023-11-28 00:31:15

27

4

在尝试制作一个小的 css 动画时，我遇到了 css 的 transform-origin 属性的小问题。为了说明我在说什么，我用 cms 设计了我想要的东西，这是我想要得到的，但是使用 cms 的代码更复杂:

.main {
margin:30px;
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  background-color: rgb(230, 60, 60);
  border-color: transparent;
  width: 68px;
  height: 25px;
  transform-style: preserve-3d;
  transform: translate3d(-8.93274px, -0.0896834px, 0px);
  transform-origin: 33.9995px 12.5px 0px;
}
@keyframes gwd-gen-1wa0gwdanimation_gwd-keyframes {
  0% {
    width: 68px;
    height: 25px;
    transform-origin: 33.9995px 12.5px 0px;
    transform: translate3d(-8.93274px, -0.0896834px, 0px);
    animation-timing-function: cubic-bezier(0.415, 0.189, 0, 1.079);
  }
  14.2857% {
    width: 185px;
    height: 25px;
    transform-origin: 33.9995px 12.5px 0px;
    transform: translate3d(-8.93274px, -0.0896834px, 0px);
    animation-timing-function: ease-out;
  }
  28.5714% {
    width: 185px;
    height: 25px;
    transform-origin: 33.9995px 12.5px 0px;
    transform: translate3d(-8.93274px, -0.0896834px, 0px);
    animation-timing-function: cubic-bezier(0.255, 0.269, 0.445, 0.879);
  }
  42.8571% {
    width: 68px;
    height: 25px;
    transform-origin: 12.4211px 12.5px 0px;
    transform: translate3d(108px, 0px, 0px);
    animation-timing-function: ease-out;
  }
  57.1429% {
    width: 68px;
    height: 25px;
    transform-origin: 12.5035px 12.5px 0px;
    transform: translate3d(108px, 0px, 0px);
    animation-timing-function: cubic-bezier(0.415, 0.189, 0, 1.079);
  }
  71.4286% {
    width: 185px;
    height: 25px;
    transform-origin: 34.0926px 12.5px 0px;
    transform: translate3d(-9px, 0px, 0px);
    animation-timing-function: ease-out;
  }
  85.7143% {
    width: 185px;
    height: 25px;
    transform-origin: 34.0926px 12.5px 0px;
    transform: translate3d(-9px, 0px, 0px);
    animation-timing-function: ease;
  }
  100% {
    width: 68px;
    height: 25px;
    transform-origin: 12.5583px 12.5px 0px;
    transform: translate3d(-9px, 0px, 0px);
    animation-timing-function: linear;
  }
}
.main {
  animation: gwd-gen-1wa0gwdanimation_gwd-keyframes 1.2s linear 0s 1 normal forwards running;
}

我尝试在不使用 3d 属性的情况下重现它，就像使用 cms 时一样，但我的问题是，当 div 调整大小时，它会在其末端移动，然后在它应该像 css 一样表现时改变方向。所以这就是我通过执行动画的第一部分得到的结果(我的 div 从右侧增长并在左侧缩小)但是它在调整大小时移动:

    .main{
    animation: resize 2s ease  1 normal forwards;
    height:30px;
    width:200px;
    background-color:red;
    transform-origin:left;
    margin-left:100px;
    }
    @keyframes resize {
    0%{
    
    }
    50%{ 
    transform-origin:left;
    transform:scalex(2);
    }
    100%
    {
    transform-origin:right;
    transform:scalex(0.8);
    }
    }

<html>
<head>
</head>
<body>

<div class="main"></div>

</body>
</html>

最佳答案

简单地改变比例是不正确的!您应该结合位置和比例。由于刻度不会改变实际位置。同样，对于您的 3D 动画，您也应该将多个动画组合在一起。这是我的解决方案。

.main{
        animation: resize 2s ease  1 normal forwards;
        height:30px;
        width:200px;
        background-color:red;
        transform-origin:left;
        margin-left:100px;
      }
      @keyframes resize {
        0%{

        }
        50%{
          transform-origin:left;
          transform:scalex(2) ;
        }
        100%{
          transform: translateX(100%);
        }
      }

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    
  </head>
  <body>
    <div class="main"></div>
  </body>
</html>

关于html - 在动画中调整 div 大小时变换原点问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54394633/

27

4

0

文章推荐： c++ - 构造函数带参数时如何实例化模板类

文章推荐： javascript - 使用javascript调整和重新定位div

文章推荐： c++ - 没有 [ ] 的数组等于什么？ C++

macos - 如何获取事件空间上每个可见窗口的框架(原点、大小)？
我试图弄清楚如何获取所有可见窗口的框架。我尝试了以下代码，但它仅适用于应用程序本身，其他窗口报告 {0,0,0,0} NSArray *windowArray = [NSWindow wind
java - 原点、宽度、高度
左矩形=新矩形(0,0,WIDTH/9,HEIGHT);在此代码中，如果我增加宽度，为什么它看起来会进一步延伸到 JFrame 的左侧？如果我减少它为什么它会向右延伸？这不是像坐标平原一样工作吗？高度
java - 在屏幕上查找 AffineTransform 原点
假设我有一个 AffineTransform (transform) 并调用它的一堆方法。假设我旋转并平移它。然后我用它转换图形对象 (g2d): g2d.transform(transform);
java - 多个夹具的 Box2D 原点
我认为当你对物体施加力时，它会施加到 body 的原点(可能是质心)。现在我正在尝试创建类似俄罗斯方 block 的 block ，并通过应用 LinearPulse 使它们跳跃，如下所示: body
iOS - 无法更改 View 原点
我正在阅读 Big Nerd Ranch 指南第 4 版，但在处理 View 和 View 层次结构的章节中，我遇到了一些与 View 来源有关的问题。我已经在我的 View Controller
c++ - 双缓冲和视口(viewport)原点？
我想把原点放在中心，所以我做了: SetViewportOrgEx(hdc,width/2,height/2,NULL); (如下面的代码所示) 现在，在实现双缓冲后它似乎无法正常工作。任何想法为什么
C# directx Sprite 原点
当我的 Sprite 旋转原点固定在窗口的左上角时，我遇到了这个问题(与 sprite.Draw 和 sprite.Draw2D 相同)无论哪种方式，如果我改变旋转中心它仍然在左上角。我需要 Spri
Git pull 原点 HEAD
有人告诉我，您可以通过以下方式向与当前 Git 分支名称相匹配的远程分支推送和 pull : git push origin HEAD 或 git pull origin HEAD 它以前一直对我有用
android canvas 在翻译后使用屏幕原点而不是 View 原点
我正在使用自定义 View 和 Canvas 在屏幕上绘制对象。 View 位于距屏幕原点的 Y 偏移处。我想平移 Canvas ，然后绘制一个对象。但是，当我使用 setmatrix 平移 Canv
javascript - 单击时 d3 拖动跳转到其他位置 - 原点？
尝试拖动组。为什么 origin 在这里不起作用？注意到当你第一次点击它时它是如何跳跃的吗？ JSFIDDLE基于此:http://bl.ocks.org/mbostock/1557377 var d
css - 在鼠标移动时更改透视角度/原点 3d-css
我正在尝试使用以下立方体的透视视角: http://jsfiddle.net/TrySpace/JvFSQ/5/ 但是我没有按照我的预期去做，我想要改变实际的视角。所以当transformOrigin
openshift-origin - OpenShift 原点 : Node not ready
我的 OpenShift Origin 安装似乎有问题。当我获得路由器的端点时，我得到以下信息: oc get endpoints --namespace=default --selector=ro
ios - Objective-C:在打开之前*检测键盘大小/原点？
这是怎么做到的？我正在寻找 iOS7/8 解决方案。 KeyboardWillShow 并不令人满意，因为我需要在键盘实际显示之前根据键盘高度调整 View 大小。最佳答案 keyboardWill
javascript - 如何在 jQuery 中获取 iframe 原点
我正在 iframe 上监听其内容何时发生变化。当它发生时，我想知道内容的当前来源是什么。我无法访问该内容，因为它违反了相同的域策略，但我只要根据网址或主机知道它显示的内容就可以了。我可以通过 j
css - 用 css3 定义 scale3d 原点
我一直致力于使用 CSS3 创建动画条形图。它在钢筋的两侧运行良好，但钢筋的顶部和底部一直存在问题。我一直在通过 jQuery 改变它们的 css“高度”属性来缩放边，但我意识到这不是最好的方法。我
c++ - 设置射线(原点，方向)和三角形交点(无glm)
Edit3:我的问题与我预期的功能完全不同。我让代码保留下来，也许这对某人有帮助 :)(并且不要忘记调试!)。我试图找到直线与三角形相交的 vector 。当前状态:随机交叉，即使鼠标不在地板上和
ios - 如何在缩放的 UIView subview 上计算正确的 CGRect 原点？
我需要在原始 View 的坐标中计算 UIView subview 的可见 CGRect。如果比例为 1，我可以正常工作，但如果其中一个 super View 或 View 本身被缩放(收缩)，可见的
python - 3D 原点 x 的 3D 数组快速插值
这个问题类似于以前回答的问题 Fast interpolation over 3D array ，但无法解决我的问题。我有一个维度为(时间、高度、纬度、经度)的 4D 数组，标记为 y.shape=
swift - 加载到 View 后的 CollectonView "readjusts"原点
我正在制作自定义贴纸包。这是一个 iMessage 扩展应用程序。我继承了 UICollectionView 而不是使用基本的 MSMessagesViewController。因此，只有当我在展开
objective-c - 如何将 Cocoa 坐标从左上角 == 原点转换为左下角 == 原点
我使用 CGWindowListCopyWindowInfo 获取所有窗口的列表。它根据屏幕的左上角原点为我提供每个窗口的坐标。如果我使用 NSWindow 的 setFrame 方法，坐标基于

首页

博学

6Ren·AI

商城

html - 在动画中调整 div 大小时变换原点问题