CSS 中的 transform-origin 属性

发表于 | 更新于: | 分类于 | | 阅读次数:
字数统计: 211 | 阅读时长 ≈ 1

今天看到了 transform-origin 这个属性，不知道它的作用，遂总结整理一下。

transform-origin CSS 属性可以让元素更改一个元素变形的原点，举个很简单的例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
.outer {
  border: 1px solid red;
  margin-top: 50px;
}
.square {
  width: 100px;
  height: 100px;
  background-color: #aaaaaa;
  color: #fff;
  transform: rotate(45deg);
}
</style>
<body>
  <div class="outer">
    <div class="square">Square</div>
  </div>
</body>

上面的例子就是一个旋转的正方形，可以看到默认是以正方形的中心点进行旋转。

image-20200509215152470

而 transform-origin 就是改变其变形原点，也就是 transform 的中心，例如我将 square 设置为以左上角顶点为旋转原点。

添加一行 CSS 代码如下：

1
transform-origin: top left;

效果如下：

image-20200509222849062

更多的属性可以查看 MDN 的文档。

邹明远 wechat
欢迎关注我的公众号「嗜码」
请我喝杯快乐水