transform-origin学习笔记之旋转与基点的关系

最新推荐文章于 2024-08-25 20:52:11 发布

海阔天空z

最新推荐文章于 2024-08-25 20:52:11 发布

阅读量3.6k

点赞数

分类专栏：前端 web css property 文章标签： css web css3

本文链接：https://blog.csdn.net/u014143621/article/details/75093344

版权

本文详细探讨了CSS3的transform-origin属性，它定义了元素变换的基准点。通过实例展示了2D和3D旋转中transform-origin的不同效果，包括left/top、center/center、right/bottom等组合，以及3D旋转如rotateX和rotateY时基点位置的影响。理解此属性有助于更精确地控制元素的变换效果。

摘要由CSDN通过智能技术生成

transform是CSS3里的变换属性，常用的有translate（平移）、rotate（旋转）、skew(倾斜)、scale(缩放)方法。而transform-origin并不是transform的属性值，其具有独立i的语法，但值得注意的是，transform-origin必须配合transform来使用，这个从名字也可以看得出来，就是给transform设置的各种动作设置一个参考点。默认情况下，元素的动作参考点为元素盒子的中心。transform可以设置九个位置的值，水平方向有left | center | right 三个值，垂直方向也有三个，分别是 top | center |bottom ，故一共有九个。

请看示例：

一.2D情况下：

html源码：

<nav>
	<div></div>
</nav>

css源码：

			nav{
				width: 200px;
				height: 200px;
				background-color: blue;
			}
			div,div::before{
			   width: 100px;
			   height: 50px;
			   background-color: red;
			   border-top-left-radius: 25px;
			   border-top-right-radius: 25px;
			   position: absolute;