语法如下:
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