---

CSS3 transform-origin 属性

CSS3 transform-origin 属性定义了一个元素变形的基点。当使用 CSS3 中的“旋转、缩放和倾斜”功能时，变换将发生在元素的转换原点周围。

语法

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

• x-axis：x 轴上的变换基点的位置。可以使用以下值：
  • 百分比值
  • 长度值
  • 左、右、center 和 x-center 之一
• y-axis：y 轴上的变换基点的位置。可以使用以下值：
  • 百分比值
  • 长度值
  • 上、下、center 和 y-center 之一
• z-axis：z 轴上的变换基点的位置。可以使用以下值：
  • 百分比值
  • 长度值
  • 正数或负数的数值

取值

取值为一个或两个有效标识符和一个可选数值。以下是各个取值的解释：

• x-axis：left 或者 right 或者 center 或者 <length> 或者 <percentage>。
• y-axis：top 或者 bottom 或者 center 或者 <length> 或者 <percentage>。
• z-axis：数值或者 <percentage>。

示例

实例 1：

div {
  transform: rotate(45deg);
  transform-origin: center;
}

上述示例中，div 元素将围绕其中心点旋转 45 度。

实例 2：

div {
  transform: rotate(45deg);
  transform-origin: top left;
}

上述示例中，div 元素将围绕其左上角的点旋转 45 度。

实例 3：

div {
  transform: rotate(45deg);
  transform-origin: 30% 50%;
}

上述示例中，div 元素将围绕相对于其宽度的 30%，以及相对于其高度的 50% 的地方旋转 45 度。

注意事项

• 该属性适用于单个变换，而不是变换序列。
• 仅支持 2D 和 3D 浏览器。对于使用古老版本的 IE 或 Firefox 来说，需要使用前缀 “-moz-” 和 “-ms-”。
• 当指定的百分比值偏移量超过边框框的右边或底部时，会将其自动调整为最大偏移量来防止内容溢出。
• 当指定的百分比值发生变化时，变换基点相对于边框框的位置是相对于元素的填充框而不是内容框的。

结论

CSS3 transform-origin 属性允许您指定元素变形中的转换原点。这在进行元素旋转、缩放和倾斜时非常有用。通过使用该属性，可以使转换具有更精细的行为和精度，使您的网站更加美观和专业化。同时开发者也需要注意到该属性的兼容问题。