css3 transform, transform-origin 用法

1、transform的教程，参见菜鸟教程：transform菜鸟教程

简言之，可对 Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

2、 transform-origin教程， 参见菜鸟教程和MDN教程：

• 菜鸟教程：transform-origin 菜鸟教程

• MDN教程： transform-origin mdn

简言之，该属性允许您更改转换元素的位置。

2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴。

注意： 使用此属性必须先使用 transform 属性。

语法：transform-origin: x-axis y-axis z-axis;

image.png

我的理解： transform-origin 用来变形原点（即围绕哪个原点进行变形），transform用来变形

默认未设置的情况下，变形原点都是盒子的中心点，而有些情况我们需要不在中心点对其进行旋转和缩放等，则需要通过transform-origin 来动态改变原点，再进行变形

这篇文章总结的很好：介绍transform-origin的新浪博客

image.png

image.png

结合起来看，画个示意图就是这样的：

image.png

我这边仿照着mdn的例子，创建了demo用来加深理解, 可以看看这个例子

image.png