CSS3 transform-origin 属性

w3school 在线教程

## CSS 参考手册

- CSS 参考手册
- CSS 选择器
- CSS 听觉参考手册
- CSS 网络安全字体
- CSS 单位
- CSS 颜色
- CSS 颜色值
- CSS 颜色名
- CSS 颜色十六进制

# CSS3 transform-origin 属性

CSS 参考手册

## 实例

设置旋转元素的基点位置：

    div
    {
    transform: rotate(45deg);
    transform-origin:20% 40%;

    -ms-transform: rotate(45deg); 		/* IE 9 */
    -ms-transform-origin:20% 40%; 		/* IE 9 */

    -webkit-transform: rotate(45deg);	/* Safari 和 Chrome */
    -webkit-transform-origin:20% 40%;	/* Safari 和 Chrome */

    -moz-transform: rotate(45deg);		/* Firefox */
    -moz-transform-origin:20% 40%;		/* Firefox */

    -o-transform: rotate(45deg);		/* Opera */
    -o-transform-origin:20% 40%;		/* Opera */
    }

亲自试一试

页面底部有更多实例。

## 浏览器支持

IE | Firefox | Chrome | Safari | Opera
--- | --- | --- | --- | ---

Internet Explorer 10、Firefox、Opera 支持 transform-origin 属性。

Internet Explorer 9 支持替代的 -ms-transform-origin 属性（仅适用于 2D 转换）。

Safari 和 Chrome 支持替代的 -webkit-transform-origin 属性（3D 和 2D 转换）。

Opera 只支持 2D 转换。

## 定义和用法

transform-origin 属性允许您改变被转换元素的位置。

2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。

为了更好地理解 transform-origin 属性，请查看这个演示。

Safari/Chrome 用户：为了更好地理解 transform-origin 属性用于 3D 转换的情况，请查看这个演示。

注释：该属性必须与 transform 属性一同使用。

为了更好地理解 transform 属性，请查看这个演示。

默认值： | 50% 50% 0
继承性： | no
版本： | CSS3
JavaScript 语法： | object.style.transformOrigin="20% 40%"

## 语法

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

值 | 描述
--- | ---

x-axis

定义视图被置于 X 轴的何处。可能的值：

- left
- center
- right
- length
- %

y-axis

定义视图被置于 Y 轴的何处。可能的值：

- top
- center
- bottom
- length
- %

z-axis

定义视图被置于 Z 轴的何处。可能的值：

- length

## 相关页面

CSS3 教程：CSS3 2D 转换

CSS3 教程：CSS3 3D 转换

CSS 参考手册