关于旋转点transform-origin()的位置介绍

最新推荐文章于 2025-04-22 14:23:04 发布

贪吃喵~

最新推荐文章于 2025-04-22 14:23:04 发布

阅读量2.9k

点赞数

CC 4.0 BY-SA版权

文章标签： web 旋转点

本文链接：https://blog.youkuaiyun.com/m_togethershare/article/details/100971919

本文深入探讨CSS中transform-origin属性的使用，解析如何通过设定旋转点实现精准的元素旋转效果，包括左上、右下等五种基本定位及边框中间点的高级应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是第一篇的技术介绍，可能总结的有点粗糙，以后会慢慢改进的，希望能给你们带来帮助~~

上面的图片是一个靠右定位的盒子，旋转45deg，旋转点是默认的（left top）左上角的原点。

一般的旋转点有，左上（top left），左下(left bottom)，右上(right top)，右下(right bottom)，中心点(center center)五个

如果想要确定旋转点为边框点上的中间，效果图如下：
在这里插入图片描述这里就是利用红色盒子与粉色盒子交叉的点（红色盒子边框的中心点）作为旋转点，旋转45deg的效果图，transform-origin:(红色盒子长度的全部，红色盒子宽度的一半)，即一左上角为圆心，X轴和Y轴的对应坐标。

这篇主要就是介绍有关旋转点的定位，还不够详细，有需要可以参考。
下面贴上代码：

css:
body{
margin:0;
padding:0;
}
.all{
position: relative;
width: 200px;
height: 200px;
margin-top:50px;
}
.one{
position: absolute;
right:0px;
width: 200px;
height: 200px;
background-color: pink;
}
.two{
position: absolute;
top:0;
right: 0;
width:100px;
height:100px;
background-color: red;
/* 旋转点的坐标默认是0 0， /
/ transform-origin: 0% 0%; /
/ transform-origin: left top; /
transform-origin: 100% 50%;
transform:rotate(45deg);
}
.wel{
position: relative;
top:0;
left:0;
width: 300px;
height: 300px;
}
.wel .mk{
position: absolute;
top:0;
left:0;
width: 300px;
height: 300px;
background-color: skyblue;
}
.wel .nj{
position: absolute;
right:0;
top:0;
width: 100px;
height: 100px;
background-color: yellow;
/ 默认的旋转点是center center /
/ 旋转点可以设置是方位名词，也可以是长度px，百分比 */
transform-origin: left top;
transform: rotate(45deg);
}