CSS transform-origin 属性
定义和用法
transform-origin 属性允许您改变被转换元素的位置。
2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。
为了更好地理解 transform-origin 属性，请查看这个 演示。
注释: 该属性必须与 transform 属性一同使用。
提示: 为了更好地理解 3D transforms 属性，请查看这个 演示.
| 默认值: | 50% 50% 0 |
|---|---|
| 继承性: | no |
| 支持动画: | yes. 阅读有关动画的信息 测试一下 |
| 版本: | CSS3 |
| JavaScript 语法: | object.style.transformOrigin="0 0" 测试一下 |
浏览器支持
表中的数字表示支持该属性的第一个浏览器版本。
紧跟在 -webkit-, -moz- 或 -o- 前的数字为支持该前缀属性的第一个浏览器版本号。
| 属性 | |||||
|---|---|---|---|---|---|
| transform-origin (two-value syntax) |
36.0 4.0 -webkit- |
10.0 9.0 -ms- |
16.0 3.5 -moz- |
9.0 3.2 -webkit- |
23.0 15.0 -webkit- 10.5 -o- |
| transform-origin (three-value syntax) |
36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
语法
transform-origin: x-axis y-axis z-axis|initial|inherit;
属性值
| 属性值 | 描述 |
|---|---|
| x-axis |
定义视图被置于 X 轴的何处。可能的值：
|
| y-axis |
定义视图被置于 Y 轴的何处。可能的值：
|
| z-axis |
定义视图被置于 Z 轴的何处。可能的值：
|
| initial | 将此属性设置为其默认值。请参阅 initial |
| inherit | 从其父元素继承此属性。请参阅 inherit |
相关页面
CSS 教程: CSS 2D 转换
CSS 教程: CSS 3D 转换
HTML DOM 参考手册: transformOrigin 属性
