transform-origin

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

语法

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

x-axis:定义视图被置于 X 轴的何处。值：left | right | center | length | %
y-axis:定义视图被置于 Y 轴的何处。值：top | bottom | center | length | %
z-axis:定义视图被置于 Z 轴的何处。值：length

浏览器支持

IE10，Firefox、Opera支持 transform-origin 属性。

IE9支持-ms-transform-origin,用于2d转换

Chrome 和 Safari 支持替代的 -webkit-transform-origin 属性。

Opera仅支持2d转换

定义和用法

改变被转换元素的位置。

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

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

实例代码

<style>
    .outer{
        position: relative;
        width: 300px;
        height: 300px;
        margin: 100px;
        border: 1px solid #000;
    }
    .inner{
        position: absolute;
        border: 1px solid #000;
        padding: 50px;
    }

    .rotate{
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
    }
    .transform-origin{
        transform-origin: 20% 40%;
        -webkit-transform-origin: 20% 40%;
    }
</style>    

<div class="outer">
    <div class="inner rotate transform-origin">rotate transform-origin</div>
</div>

效果：