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 的做用了吧。