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

兼容性

以上关于css3属性之transform-origin属性学习笔记的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。