transform-origin 是一个CSS属性,用于指定元素变换的原点,即变换的中心点。默认情况下,变换的原点是元素的中心点。

语法如下:
transform-origin: x-axis y-axis z-axis;

  •  x-axis:定义元素变换的水平轴位置,默认是50%。

  •  y-axis:定义元素变换的垂直轴位置,默认是50%。

  •  z-axis:定义元素变换的深度轴位置,默认是0。


示例:
/* 将元素的变换原点设置为左上角 */
.transform-origin-example {
  transform-origin: 0% 0%;
}

/* 将元素的变换原点设置为右下角 */
.transform-origin-bottom-right {
  transform-origin: 100% 100%;
}

/* 将元素的变换原点设置为右上角 */
.transform-origin-top-right {
  transform-origin: 100% 0%;
}

/* 将元素的变换原点设置为中心点 */
.transform-origin-center {
  transform-origin: 50% 50%;
}

/* 将元素的变换原点设置为底部中心 */
.transform-origin-bottom-center {
  transform-origin: 50% 100%;
}

这些样式规则将影响元素的变换原点,改变元素变换的中心位置。transform-origin 可以与 transform 属性一起使用,为元素的变换效果提供更灵活的控制。


转载请注明出处:http://www.zyzy.cn/article/detail/4254/CSS