css中transform-origin的理解

定义和用法

transform-origin 属性允许您改变被转换元素的位置。

这个官方的定义看着让我头晕，实在是不好理解。

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

默认值为：50% 50% 0

x-axis的值可为left、center、right、lenght、%，left,center right是水平方向取值，对应的百分值为left=0%;center=50%;right=100%

y-axis的值为top、center、bottom、lenght、%，top center bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%;

如果只取一个值，表示垂直方向值不变。

一个元素对象的旋转点坐标系圆点（0，0），就是这个元素的左上角，然后根据实际需求，相对这个坐标圆点来设置旋转点。

例如：

未发生旋转之前的代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8"> 
 5 <style>
 6 #div1
 7 {
 8     position: relative;
 9     height: 200px;
10     width: 200px;
11     margin: 100px;
12     padding:0px;
13     border: 1px solid black;
14 }
15 #div2
16 {
17     padding:0px;
18     width:50px;
19     height:50px;
20     position: absolute;
21     border: 1px solid black;
22     background-color: red;
23     transform: rotate(0deg);
24     transform-origin:50% 50%;
25 }
26 </style>
27 </head>
28 <body>
29 <div id="div1">
30   <div id="div2">HELLO</div>
31 </div>
32 </body>
33 </html>

效果如下：

在旋转点红色正方形的中心点(50%,50%) 处旋转45deg,

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8"> 
 5 <style>
 6 #div1
 7 {
 8     position: relative;
 9     height: 200px;
10     width: 200px;
11     margin: 100px;
12     padding:0px;
13     border: 1px solid black;
14 }
15 #div2
16 {
17     padding:0px;
18     width:50px;
19     height:50px;
20     position: absolute;
21     border: 1px solid black;
22     background-color: red;
23     transform: rotate(45deg);
24     transform-origin:50% 50%;
25 }
26 </style>
27 </head>
28 <body>
29 <div id="div1">
30   <div id="div2">HELLO</div>
31 </div>
32 </body>
33 </html>

效果图：

以红色正方形的下面某一点（25px,125px）旋转45deg.

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8"> 
 5 <style>
 6 #div1
 7 {
 8     position: relative;
 9     height: 200px;
10     width: 200px;
11     margin: 100px;
12     padding:0px;
13     border: 1px solid black;
14 }
15 #div2
16 {
17     padding:0px;
18     width:50px;
19     height:50px;
20     position: absolute;
21     border: 1px solid black;
22     background-color: red;
23     transform: rotate(45deg);
24     transform-origin:25px 125px;
25 }
26 </style>
27 </head>
28 <body>
29 <div id="div1">
30   <div id="div2">HELLO</div>
31 </div>
32 </body>
33 </html>

posted on 2025-07-18 09:13 华安阅读(85) 评论(0) 收藏举报

刷新页面返回顶部

huaan011

css中transform-origin的理解

定义和用法

导航

公告