CSS3 transform 属性 transform-origin 属性

transform 属性

- scale：缩放，1 为原始大小。参数大于1放大，小于1缩小。属性值为一个时，xy 轴同时缩放；属性值为两个值时，分别控制 x、y 轴的缩放。

- rotate：水平旋转，属性值格式为 X deg。X 为正数时，顺时针旋转；为负数时，逆时针旋转

- translate：平移，基于 xy 轴重新定位元素。属性值为一个时，x、y 轴参数相同；为两个时，x、y 轴分别定位

- skew：将元素沿水平方向倾斜变形。属性值为一个时，xy 轴参数相同；为两个时，x、y 轴各自倾斜

div { 
    transform:rotate(7deg);
    -ms-transform:rotate(7deg); 	/* IE 9 */
    -moz-transform:rotate(7deg); 	/* Firefox */
    -webkit-transform:rotate(7deg); /* Safari 和 Chrome */
    -o-transform:rotate(7deg);     	/* Opera */
}

transform-origin 属性

设置transform的原点位置（参照点位置）

div {
    <!--以左上角为原点-->
    transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -webkit-transform-origin:0 0;
    -o-transform-origin:0 0;

    <!--以右上角给原点-->
    transform-origin: top right;
    -ms-transform-origin: top right;
    -moz-transform-origin: top right;
    -webkit-transform-origin:top right;
    -o-transform-origin:top right;
    
    <!--以左下角为原点-->
    transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -webkit-transform-origin:0 100%;
    -o-transform-origin:0 100%;

    <!--以右下角为原点-->
    transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -webkit-transform-origin:100% 100%;
    -o-transform-origin:100% 100%;
}