CSS 属性 transform-origin 用于指定元素变换的原点，即元素变换时的中心点。通过设置 transform-origin 属性，我们可以控制元素在进行变换（旋转、缩放、平移等）时，围绕哪个点进行变换。
语法
transform-origin 属性的语法如下：
----------------- ------ ------ -------
- x-axis: 指定元素变换的水平方向的原点位置，可以使用像素值、百分比值或关键字值。
- y-axis: 指定元素变换的垂直方向的原点位置，可以使用像素值、百分比值或关键字值。
- z-axis: 指定元素变换的深度方向的原点位置，只有在 3D 变换中才会用到，可以使用像素值。
值
transform-origin 属性的值可以是以下几种类型：
- 百分比值：相对于元素自身宽度或高度的百分比值，比如 50% 表示在元素中心点。
- 关键字值：可以使用关键字值来指定原点位置，比如 top、bottom、left、right、center 等。
- 像素值：直接指定像素值来确定原点位置，比如 100px。
示例
1. 指定中心点为元素中心
----------------- ------ -------
2. 指定左上角为原点
----------------- --- -----
3. 指定右下角为原点
----------------- ------ ------
4. 指定水平方向 50%，垂直方向 30px 处为原点
----------------- --- -----
5. 3D 变换，指定 x 轴 20px，y 轴 50%，z 轴 0 为原点
----------------- ---- --- --
总结
transform-origin 属性是控制元素变换原点的重要属性，通过合理设置 transform-origin 值，可以实现更加灵活和精准的元素变换效果。在进行 CSS 变换时，合理使用 transform-origin 属性可以帮助我们更好地控制变换效果，使页面呈现出更加优雅的视觉效果。