CSS 中的 transform-origin 属性

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

嗜码

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

阅读量721

点赞数

分类专栏： css 文章标签：前端 css transform

本文链接：https://blog.youkuaiyun.com/qq_37954086/article/details/106029161

版权

css 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了CSS的transform-origin属性，该属性用于设置元素变形的原点，通过改变这个属性，可以控制元素旋转、缩放等操作的中心点。文中通过实例展示了如何将旋转原点从中心改为左上角，帮助读者更好地理解该属性。

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

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

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

<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>