CSS的transform-origin 属性

定义和语法

语法

transform-origin: x-axis y-axis z-axis;

默认值

transform-origin:50% 50% 0;

单位
transform-origin属性值可以是百分比、em、px等具体的值，也可以是top、right、bottom、left和center这样的关键词。

属性值详解

没有旋转的时候

下面例子都旋转45°，transform: rotate(45deg);

• 默认位置是以元素中心为基点

  • transform-origin: 50% 50%;

  • transform-origin: left left;

  • transform-origin: right right;

  • transform-origin: center;
    

• 以元素左上角顶点为基点

  • transform-origin: 0 0;
    

• 以上边框中点为基点

  • transform-origin: 50% 0;
    

• 左边框中点为基点

  • transform-origin: 0 50%;
  • transform-origin: left 50%;
  • transform-origin: left;
  • transform-origin: left center;
    

• 以右边框中点为基点

  • transform-origin: 100% 50%;

  • transform-origin: 100%;

  • transform-origin: right;

  • transform-origin: right center;
    

• 通过示例可以看出来，transform-origin: x-axis y-axis;的坐标轴方向是这样的