欢迎来到计算机相关教程网!

CSS

当前位置: 主页 > 网页制作 > CSS

transform-origin详解

时间:2022-10-06 12:03:44|栏目:CSS|点击:

transform-origin是变形原点,也就是该元素围绕着那个点变形或旋转,该属性只有在设置了transform属性的时候起作用(注意元素位移translate()始终是依元素中心点进行位移);


不设置的情况下默认是以元素中心为原点进行变形。


设置变形原点的语法为:transform-origin:X Y;(3D变换下还有个Z轴,这里不讨论)


X可以是%、em、px、left、center、right;Y可以是%、em、px、top、center、bottom;


这些值所在坐标系都是以元素左上角为原点,水平向右为X轴,垂直向下为Y轴,因此left top实际上就是元素左上角也就是零点,left bottm则是元素左下角,以此类推。


下面用图片表示一下变形原点在不同设置下具体在哪个位置:

(1)默认情况:


默认值是元素中心,同时元素中心也可以表示为 transform-origin:50% 50%;或transform-origin:center center;

transform-origin详解(图1)


(2)左上角:


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

transform-origin详解(图2)


(3)右上角:


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

transform-origin详解(图3)


(4)右下角:


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

transform-origin详解(图4)


(5)左下角:


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

transform-origin详解(图5)


(6)自定义:


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

transform-origin详解(图6)


上一篇:css中,vmin和vmax的用法。

栏    目:CSS

下一篇:perspective和perspective-3d的区别详解

本文标题:transform-origin详解

本文地址:http://www.wangzhanteacher.com/?m=home&c=View&a=index&aid=252

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:8044517 | 邮箱:8044517@qq.com

Copyright © 2022-2025 计算机相关教程网 版权所有冀ICP备17010187号