CSS |变换原点属性(1)

📌 相关文章

📜 CSS |变换原点属性(1)

📅 最后修改于: 2023-12-03 15:14:19.877000 🧑 作者: Mango

CSS | 变换原点属性

变换原点（transform-origin）属性用于指定元素变换时的中心点，它是通过三个值来定义的，分别是 X 轴的偏移值、Y 轴的偏移值和 Z 轴的偏移值（如果有的话）。

语法

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

其中：

x-axis：用于设置元素的变换原点在 X 轴方向上的偏移值。
y-axis：用于设置元素的变换原点在 Y 轴方向上的偏移值。
z-axis：（可选）用于设置元素的变换原点在 Z 轴方向上的偏移值。

每个值可以使用以下单位：

px：像素。
%：百分比，此时参照的是元素的宽度和高度。
关键字值：left、center、right、top、bottom，分别表示元素的左边界、中心点、右边界、顶部、底部。

示例

以下示例演示了如何使用变换原点属性控制变换中心点：

<style>
  .box {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: #ccc;
  }
  .box1 {
    transform: rotate(45deg);
  }
  .box2 {
    transform: rotate(45deg);
    transform-origin: 50% 50%;
  }
  .box3 {
    transform: rotate(45deg);
    transform-origin: right bottom;
  }
</style>
<body>
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</body>

transform-origin 示例

可以看到：

box1 元素以默认的左上角为中心点进行了旋转变换。
box2 元素以中心点（即 50% 50%）为中心点进行了旋转变换，和 box1 相比，旋转中心移动到了中心点。
box3 元素以右下角为中心点（即 right bottom）进行了旋转变换，和 box1 相比，旋转中心向右下角移动。

注意事项

如果某个值没有提供，则默认是 50%。
如果只提供了一个值，则该值将被用于 X 和 Y 轴。
因为此属性可能会影响元素的布局，所以建议使用绝对定位或固定定位来控制元素的位置。
如果只进行旋转变换，则默认旋转中心为元素的中心点。如果同时使用了平移变换，则旋转中心需要根据平移变换进行调整。

参考链接

CSS 变换原点属性