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

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

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

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

默认值

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

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

应用

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 时的动画是这样的：

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

结语

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