transform-origin 变换原点

指定元素变换的原点。

语法：

{ transform-origin : sTransformOrigin }

默认值： 50% 50%
继承性： 否
DOM 语法： object.style.transformOrigin = sTransformOrigin
适用于： 块级元素、行内元素
浏览器支持： Internet ExplorerFirefoxChromeOperaSafari

可能的值：

[ [ <percentage> | <length> | left | center | right ]
[ <percentage> | <length> | top | center | bottom ]? ] |
[ [ left | center | right ] || [ top | center | bottom ] ]

值 描述
<length> 设置一对绝对的值。
<percentage> 相对于元素盒的尺寸。0% 0% 表示元素的左上角位置，100% 100% 表示元素的右下角位置，20% 80% 表示从顶部往下 80%，从左往右 20% 的位置。
top left | left top 和 0 0 相同。
top | top center | center top 和 50% 0 相同
right top | top right 和 100% 0 相同
left | left center | center left 和 0 50% 相同
center | center center 和 50% 50% 相同
right | right center | center right 和 100% 50% 相同
bottom left | left bottom 和 0 100% 相同
bottom | bottom center | center bottom 和 50% 100% 相同
bottom right | right bottom 和 100% 100% 相同

说明：

此属性如果设置为一个值，则表示水平方向的位置，垂直方向为 50% 或者 center 。如果设置 两个值，则第一个值代表水平位置，第二个值代表垂直位置。<percentage>、<length> 可以设置成负值。

例子 1：

<style>
#container{background:green;margin:100px;width:600px;height:600px;}
#cavas1
{
  width:220px;
  -moz-transform:rotate(-30deg);
  -webkit-transform:rotate(-30deg);
  -o-transform:rotate(-30deg);
  -ms-transform:rotate(-30deg);
  transform:rotate(-30deg);
  
  -moz-transform-origin:220px 0px;
  -webkit-transform-origin:220px 0px;
  -o-transform-origin:220px 0px;
  -ms-transform-origin:220px 0px;
  transform-origin:220px 0px;
}
</style>

<div id="container">
<div id="cavas1">
<img src="http://dotnet.aspx.cc/Images/logoSite.gif" />
</div>
</div>
测试结果：Internet Explorer 9，Firefox 4，Opera 11，Safari 5，Chrome 10 都支持该属性。
点击查看例子 1 的效果
本属性最后更新时间：2011-05-04 11:04:41