最新公告  | 
  • CTRL + D 加入收藏不迷路哦

  • 欢迎您光临码云笔记网,一个关注WEB前端开发的个人技术博客!

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

定义

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

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

语法

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

解析

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

注意:当用数值设置基点位置时,必须带单位!

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

.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;
}

left-top

(3)right top

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

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

righttop

(4)right bottom

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

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

right bottom

(5)left bottom

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

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

left bottom

(6)自定义:

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

transform-origin自定义

兼容性

兼容性

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » css3属性之transform-origin属性学习笔记

发表评论