css transform-origin 的作用说明,小程序 transformOrigin: "50% 100% 0"

发布于 1月18日  约 3 分钟

css transform-origin 的作用说明,小程序 transformOrigin: "50% 100% 0"

正如名字所写的, transform-origin 就是指定变换的原点。就是一个点。
其中的三个参数值分别代表的是这个点的 xyz轴上的相对位置。

x 轴方向上的位置 50%,y 轴方向上的位置 50%, z 轴方向上的位置 0%,其百分比是相对于这个元素来说的。

origin.png

默认值

css 中的 transform-origin 默认值是 50% 50% 0
小程序中的 wx.createAnimation() 中的默认值也是 50% 50% 0

scaleY.png

当设置为 transform-origin: transform-origin: 50% 100% 0

scaleY-with-origin.png

应用

css 中是这样写的

.stretch {
    transform: scaleY(1.5); // 纵向缩放,原比例是 1
    transform-origin: 50% 50% 0;
    transition: all 0.5s; // 定义动画作用于哪些属性,过渡时间是多少
}

小程序中是这样写的

let animationTree = wx.createAnimation({
  timingFunction: "ease-in-out",
  transformOrigin: "50% 50% 0"
});
animationTree.scaleY(1.05).step({duration: 100});
animationTree.scaleY(1.0).step({duration: 200});

transform-origin: 50% 50% 0 时的动画是这样的:

animate-center.gif

可以看到上图的变换是以树的中间为基点的,而我们需要它以树的最底部为基点变换。
当把变换原点改为 transform-origin: 50% 100% 0 时,才是我们想要的结果:

animate-base.gif

结语

现在知道 transform-origin 的作用了吧。

阅读 224发布于 1月18日

推荐阅读
青枫ky
用户专栏

个人成长记录

1 人关注
37 篇文章
专栏主页
目录