CSS 中的 transform-origin 属性

今天看到了 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">Squarediv>
  div>
body>

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

CSS 中的 transform-origin 属性_第1张图片

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

添加一行 CSS 代码如下:

transform-origin: top left;

效果如下:

CSS 中的 transform-origin 属性_第2张图片

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

你可能感兴趣的:(css)