CSS的transform-origin 属性

CSS的transform-origin 属性

基本语法：

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

默认值

transform-origin:50% 50% 0;

定义和语法
语法

transform-origin: x-axis y-axis z-axis;
1
默认值

transform-origin:50% 50% 0;
1
单位
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;

链接: link.