css3属性之transform-origin属性学习笔记

定义

transform-Origin 属性允许更改转换元素的位置。默认情况下，基点位置为元素的中心点。2D 转换元素可以改变元素的 X 和 Y 轴。3D 转换元素，还可以更改元素的 Z 轴。

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

语法

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

解析

注意：当用数值设置基点位置时，必须带单位！

设置旋转元素的基点位置主要代码：

.transform-origin-position {
    transform: rotate(0 deg);
    transform-origin: left top;
}

下面用图片表示一下变形原点在不同设置下具体在哪个位置（标红圈处为变换基点）
：

（1）默认情况：

默认值是元素中心，同时元素中心也可以表示为 transform-origin：50%50%；或 transform-origin：center center；

.transform-origin-position {
    transform: rotate(0);
    transform-origin:center center;
}

（2）left-top

要使元素围绕元素的左上角进行变形，则设置 transform-origin：0%0%；或 transform-origin：left top；

.transform-origin-position {
    transform: rotate(0);
    transform-origin: left top;
}

（3）right top

要使元素围绕元素的右上角进行变形，则设置 transform-origin：100%0%；或 transform-origin：right top；

.transform-origin-position {
    transform: rotate(0);
    transform-origin: right top;
}

（4）right bottom

要使元素围绕元素的右下角进行变形，则设置 transform-origin：100%100%；或 transform-origin：right bottom；

.transform-origin-position {
    transform: rotate(0);
    transform-origin: right bottom;
}

（5）left bottom

要使元素围绕元素的左上角进行变形，则设置 transform-origin：0%100%；或 transform-origin：left bottom；

.transform-origin-position {
    transform: rotate(0);
    transform-origin: left bottom;
}

（6）自定义：

如果想要让变形原点位于元素之外，可以直接设置坐标值 transform-origin：x y；单位可以是%、em、px

兼容性