属性语法如下:
transform-origin: x-axis y-axis z-axis;
其中 x-axis、y-axis 和 z-axis 可以是具体的长度值(像素、百分比等),也可以是关键字(如 top、left、center 等)。具体取值方式如下:
- x-axis:定义 X 轴上的变换原点。
- y-axis:定义 Y 轴上的变换原点。
- z-axis:定义 Z 轴上的变换原点(在三维变换中使用,可选)。
例如,以下是一些使用 transform-origin 的例子:
/* 使用关键字 */
transform-origin: top right;
/* 使用具体的长度值 */
transform-origin: 50px 100px;
/* 使用百分比 */
transform-origin: 25% 75%;
/* 三维变换 */
transform-origin: 50% 50% 30px;
这些值的组合决定了变换的原点,元素将围绕这个点进行旋转、缩放等变换。
转载请注明出处:http://www.zyzy.cn/article/detail/6147/CSS