CSS中transform-origin（位置变换基点）

transform-origin是确定transform变换时（rotate、scale等属性）基点位置的属性，默认情况为中心点

transform-origin并不是transform中的属性值，他具有自己的语法。

但是他要结合transform才能起作用。

transform-origin:x-axisy-axisz-axis;

---

值                                                            描述

x-axis定义视图被置于 X 轴的何处。    可能的值：left center right length %

y-axis定义视图被置于 Y 轴的何处。    可能的值：top center bottom length %

z-axis定义视图被置于 Z 轴的何处。     可能的值： length

示例：

原样式

transform: rotate(45deg); //默认变换基点为元素中心点

transform: rotate(45deg);

transform-origin: right bottom;

基于右下位置变换，即图中黄色点

    transform: rotate(45deg);

    transform-origin: 0 bottom;

基于左下定点变换