这个变换的起点一开始可能有点难理解，不过用了过渡动画，再加上页面上显示的这个尺子，就比较容易理解了 ... 设置变换起点的属性是 transform-origin .. 现在它的值是 right bottom ..

right 是 x 轴的值，它表示的值是 100% .. 对这个这个图像元素来说，就是它的最右边的这个边儿的某一个点 .. 这里 y 轴的值我们也用了一个关键词，就是这个 bottom ... 它表示的值也是 100% .. 对于这个图像元素，它表示的就是图像最底下这个边儿上的某个位置 ..

x 跟 y 交叉的地方就是变换的起点 .. x 轴的最右边 .. ，y 轴的最下边... 交叉的地方就是右下角这个点 ..

把这个起点变成右上角，可以用一个 right top ...

现在我想使用一个具体的值 .. 先要关掉这个 Ruler .. 然后打开参考线 ... 调整一下页面上显示的这两条参考线 ..

水平的参考线就相当于是 x 轴， 垂直的参考线相当于是 y 轴 .. 现在我想用它们俩的交叉点作为变换的起点 ..

这样我们应该把 x 轴的值设置成 right .. 或者 100% ... y 轴的我们用一个具体的值， 这一小块的高度大概是 50px ... 把 y 轴的值设置成 50px ..

再用动画显示一下这个变换 .. 你会发现，这个变换的 origin ，就是页面上两条参考线交叉的地方 ..

再调整一下这两条参考线的交叉点 ... 现在我们要设置的 origin 的值， x 大概是 50px .. y 大概也是 50px ...

再看一下这个变换的动画 ... 现在这个图像大概就会使用我们设置的 origin 去做旋转变换 ...