本站首页 | 代码实验室 | CSS3 中文参考 | 书籍出版 | oogle 英文翻译版 | 给我留言

transform 变换

指定元素的变换。

语法：

{ transform : sTransform }

默认值：	none
继承性：	否
DOM 语法：	object.style.transform = sTransform
适用于：	块级元素、行内元素
浏览器支持：

可能的值：

none | <transform-function> [ <transform-function> ]*

值	描述
none	不进行变换。
<transform-function>	一个或者多个变换函数，以空格分开。

说明：

变换函数有：

matrix(<number>, <number>, <number>, <number>, <number>, <number>)：以变换矩阵搜方式进行 2D 变换。matrix(a,b,c,d,e,f) 等价于变换矩阵[a b c d e f]。
translate(<translation-value>[, <translation-value>])：以向量[tx,ty]的方式进行 2D 变换。如果 ty 没有设置值，则认为是 0 。
translateX(<translation-value>)：指定 X 方向的变换。
translateY(<translation-value>)：指定 Y 方向的变换。
scale(<number>[, <number>])：通过缩放向量[sx,xy]进行 2D 缩放，如果第二个参数未提供，则认为是与第一个参数相同。
scaleX(<number>)：使用[sx,1]缩放因子进行缩放。
scaleY(<number>)：使用[1,sy]缩放因子进行缩放。
rotate(<angle>)：旋转指定的角度。
skewX(<angle>)：沿 X 轴进行扭曲变换。
skewY(<angle>)：沿 Y 轴进行扭曲变换。
skew(<angle> [, <angle>])：同时沿 X、Y 轴进行扭曲变换。第一个参数是沿 X 轴的扭曲，第二个参数是沿 Y 轴的扭曲，如果第二个参数未提供，则认为是 0 。

例子 1：

<style>
#cavas1
{
  width:500px;border:2px solid orange;margin:100px;padding:10px;line-height:1.4em;
  -moz-transform:rotate(45deg);
  -webkit-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  -ms-transform:rotate(45deg);
  transform:rotate(45deg);
}
#cavas1:hover {
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
-ms-transform:rotate(90deg);
}
</style>

<div id="cavas1">
外湖富商高赞的女儿高秋芳，聪明俊美，被父母视为掌上明珠。高赞夫妇为爱女择婿费尽心机，登门参试者甚多，但都不中意。宦门公子颜俊，不学无术，恃财仗势，选美寻欢。在庙会上，颜俊见秋芳貌美，欲以金钱取得她的欢心，虽遭碰壁，却不死心。于是，他指使其债户果子铺掌柜尤辰，前往高府骗婚。不料高赞择婿严谨，定要会文相婿。颜俊腹中无墨，又怕高家认出他是追赶高小姐的无耻之徒，便想出移花接木之计，假以会文为名，蒙骗其表弟钱青冒名顶替，到高府应试。相亲宴上，秋芳乔装改扮，亲赴席前送酒试才。高赞见钱青才貌出众，欣然允亲。吉日将临，高赞定要佳婿亲自迎娶。颜俊唯恐真情败露，再次请钱青帮助。钱青正为替他相亲之事悔恨不已，拒不替他迎亲。后来，颜母亲自出面，迫使钱青应允。钱青万般无奈，违心从命。迎亲之日，高府宾客满座，盛情款待，忽然，天气突变，风雪交加，湖水浪涌，无法行船，高赞恐误吉日良辰，执意在他家拜堂成亲。迎亲者自知不妥，但又不能言明，只得拜天地，入洞房。秋芳夙愿得偿，感到无比幸福，对钱青关怀备至。可是，钱青悔恨交加，不知所措。花烛之夜，一对新人，各怀心事，痛苦地坐到天明。颜俊得知钱青与高秋芳已拜堂成亲，怒不可遏，硬拉钱青上公堂，告钱青骗婚占妻之罪。高赞得知真情，也拉尤辰到公堂论理。知县在夫人的协助下，审明案情，惩戒了颜俊，成全了钱青与秋芳的姻缘。
</div>

测试结果：Internet Explorer 9，Firefox 4，Opera 11，Safari 5，Chrome 10 都支持该属性。

点击查看例子 1 的效果

例子 2：

<style>
#cavas1
{
  width:500px;border:2px solid orange;margin:100px;padding:10px;line-height:1.4em;
  -moz-transform:matrix(1, -0.2, 0, 1, 0, 0);
  -webkit-transform:matrix(1, -0.2, 0, 1, 0, 0);
  -o-transform:matrix(1, -0.2, 0, 1, 0, 0);
  -ms-transform:matrix(1, -0.2, 0, 1, 0, 0);
  transform:matrix(1, -0.2, 0, 1, 0, 0);
}
</style>

<div id="cavas1">
外湖富商高赞的女儿高秋芳，聪明俊美，被父母视为掌上明珠。高赞夫妇为爱女择婿费尽心机，登门参试者甚多，但都不中意。宦门公子颜俊，不学无术，恃财仗势，选美寻欢。在庙会上，颜俊见秋芳貌美，欲以金钱取得她的欢心，虽遭碰壁，却不死心。于是，他指使其债户果子铺掌柜尤辰，前往高府骗婚。不料高赞择婿严谨，定要会文相婿。颜俊腹中无墨，又怕高家认出他是追赶高小姐的无耻之徒，便想出移花接木之计，假以会文为名，蒙骗其表弟钱青冒名顶替，到高府应试。相亲宴上，秋芳乔装改扮，亲赴席前送酒试才。高赞见钱青才貌出众，欣然允亲。吉日将临，高赞定要佳婿亲自迎娶。颜俊唯恐真情败露，再次请钱青帮助。钱青正为替他相亲之事悔恨不已，拒不替他迎亲。后来，颜母亲自出面，迫使钱青应允。钱青万般无奈，违心从命。迎亲之日，高府宾客满座，盛情款待，忽然，天气突变，风雪交加，湖水浪涌，无法行船，高赞恐误吉日良辰，执意在他家拜堂成亲。迎亲者自知不妥，但又不能言明，只得拜天地，入洞房。秋芳夙愿得偿，感到无比幸福，对钱青关怀备至。可是，钱青悔恨交加，不知所措。花烛之夜，一对新人，各怀心事，痛苦地坐到天明。颜俊得知钱青与高秋芳已拜堂成亲，怒不可遏，硬拉钱青上公堂，告钱青骗婚占妻之罪。高赞得知真情，也拉尤辰到公堂论理。知县在夫人的协助下，审明案情，惩戒了颜俊，成全了钱青与秋芳的姻缘。
</div>

测试结果：Internet Explorer 9，Firefox 4，Opera 11，Safari 5，Chrome 10 都支持该属性。

点击查看例子 2 的效果

例子 3：

<style>
#cavas1
{
  width:500px;border:2px solid orange;padding:10px;line-height:1.4em;
  -moz-transform:translate(600px, 100px);
  -webkit-transform:translate(600px, 100px);
  -o-transform:translate(600px, 100px);
  -ms-transform:translate(600px, 100px);
  transform:translate(600px, 100px);
}
</style>

<div id="cavas1">
外湖富商高赞的女儿高秋芳，聪明俊美，被父母视为掌上明珠。高赞夫妇为爱女择婿费尽心机，登门参试者甚多，但都不中意。宦门公子颜俊，不学无术，恃财仗势，选美寻欢。在庙会上，颜俊见秋芳貌美，欲以金钱取得她的欢心，虽遭碰壁，却不死心。于是，他指使其债户果子铺掌柜尤辰，前往高府骗婚。不料高赞择婿严谨，定要会文相婿。颜俊腹中无墨，又怕高家认出他是追赶高小姐的无耻之徒，便想出移花接木之计，假以会文为名，蒙骗其表弟钱青冒名顶替，到高府应试。相亲宴上，秋芳乔装改扮，亲赴席前送酒试才。高赞见钱青才貌出众，欣然允亲。吉日将临，高赞定要佳婿亲自迎娶。颜俊唯恐真情败露，再次请钱青帮助。钱青正为替他相亲之事悔恨不已，拒不替他迎亲。后来，颜母亲自出面，迫使钱青应允。钱青万般无奈，违心从命。迎亲之日，高府宾客满座，盛情款待，忽然，天气突变，风雪交加，湖水浪涌，无法行船，高赞恐误吉日良辰，执意在他家拜堂成亲。迎亲者自知不妥，但又不能言明，只得拜天地，入洞房。秋芳夙愿得偿，感到无比幸福，对钱青关怀备至。可是，钱青悔恨交加，不知所措。花烛之夜，一对新人，各怀心事，痛苦地坐到天明。颜俊得知钱青与高秋芳已拜堂成亲，怒不可遏，硬拉钱青上公堂，告钱青骗婚占妻之罪。高赞得知真情，也拉尤辰到公堂论理。知县在夫人的协助下，审明案情，惩戒了颜俊，成全了钱青与秋芳的姻缘。
</div>

测试结果：Internet Explorer 9，Firefox 4，Opera 11，Safari 5，Chrome 10 都支持该属性。

点击查看例子 3 的效果

例子 4：

<style>
#cavas1
{
  width:500px;border:2px solid orange;padding:10px;line-height:1.4em;
  -moz-transform:translateX(100px);
  -webkit-transform:translateX(100px);
  -o-transform:translateX(100px);
  -ms-transform:translateX(100px);
  transform:translateX(100px);
}
</style>

<div id="cavas1">
外湖富商高赞的女儿高秋芳，聪明俊美，被父母视为掌上明珠。高赞夫妇为爱女择婿费尽心机，登门参试者甚多，但都不中意。宦门公子颜俊，不学无术，恃财仗势，选美寻欢。在庙会上，颜俊见秋芳貌美，欲以金钱取得她的欢心，虽遭碰壁，却不死心。于是，他指使其债户果子铺掌柜尤辰，前往高府骗婚。不料高赞择婿严谨，定要会文相婿。颜俊腹中无墨，又怕高家认出他是追赶高小姐的无耻之徒，便想出移花接木之计，假以会文为名，蒙骗其表弟钱青冒名顶替，到高府应试。相亲宴上，秋芳乔装改扮，亲赴席前送酒试才。高赞见钱青才貌出众，欣然允亲。吉日将临，高赞定要佳婿亲自迎娶。颜俊唯恐真情败露，再次请钱青帮助。钱青正为替他相亲之事悔恨不已，拒不替他迎亲。后来，颜母亲自出面，迫使钱青应允。钱青万般无奈，违心从命。迎亲之日，高府宾客满座，盛情款待，忽然，天气突变，风雪交加，湖水浪涌，无法行船，高赞恐误吉日良辰，执意在他家拜堂成亲。迎亲者自知不妥，但又不能言明，只得拜天地，入洞房。秋芳夙愿得偿，感到无比幸福，对钱青关怀备至。可是，钱青悔恨交加，不知所措。花烛之夜，一对新人，各怀心事，痛苦地坐到天明。颜俊得知钱青与高秋芳已拜堂成亲，怒不可遏，硬拉钱青上公堂，告钱青骗婚占妻之罪。高赞得知真情，也拉尤辰到公堂论理。知县在夫人的协助下，审明案情，惩戒了颜俊，成全了钱青与秋芳的姻缘。
</div>

测试结果：Internet Explorer 9，Firefox 4，Opera 11，Safari 5，Chrome 10 都支持该属性。

点击查看例子 4 的效果

例子 5：

<style>
#cavas1
{
  width:500px;border:2px solid orange;padding:10px;line-height:1.4em;
  -moz-transform:translateY(100px);
  -webkit-transform:translateY(100px);
  -o-transform:translateY(100px);
  -ms-transform:translateY(100px);
  transform:translateY(100px);
}
</style>

<div id="cavas1">
外湖富商高赞的女儿高秋芳，聪明俊美，被父母视为掌上明珠。高赞夫妇为爱女择婿费尽心机，登门参试者甚多，但都不中意。宦门公子颜俊，不学无术，恃财仗势，选美寻欢。在庙会上，颜俊见秋芳貌美，欲以金钱取得她的欢心，虽遭碰壁，却不死心。于是，他指使其债户果子铺掌柜尤辰，前往高府骗婚。不料高赞择婿严谨，定要会文相婿。颜俊腹中无墨，又怕高家认出他是追赶高小姐的无耻之徒，便想出移花接木之计，假以会文为名，蒙骗其表弟钱青冒名顶替，到高府应试。相亲宴上，秋芳乔装改扮，亲赴席前送酒试才。高赞见钱青才貌出众，欣然允亲。吉日将临，高赞定要佳婿亲自迎娶。颜俊唯恐真情败露，再次请钱青帮助。钱青正为替他相亲之事悔恨不已，拒不替他迎亲。后来，颜母亲自出面，迫使钱青应允。钱青万般无奈，违心从命。迎亲之日，高府宾客满座，盛情款待，忽然，天气突变，风雪交加，湖水浪涌，无法行船，高赞恐误吉日良辰，执意在他家拜堂成亲。迎亲者自知不妥，但又不能言明，只得拜天地，入洞房。秋芳夙愿得偿，感到无比幸福，对钱青关怀备至。可是，钱青悔恨交加，不知所措。花烛之夜，一对新人，各怀心事，痛苦地坐到天明。颜俊得知钱青与高秋芳已拜堂成亲，怒不可遏，硬拉钱青上公堂，告钱青骗婚占妻之罪。高赞得知真情，也拉尤辰到公堂论理。知县在夫人的协助下，审明案情，惩戒了颜俊，成全了钱青与秋芳的姻缘。
</div>

测试结果：Internet Explorer 9，Firefox 4，Opera 11，Safari 5，Chrome 10 都支持该属性。

点击查看例子 5 的效果

例子 6：

<style>
#cavas1
{
  width:500px;border:2px solid orange;padding:10px;line-height:1.4em;
  -moz-transform:scale(4,2);
  -webkit-transform:scale(4,2);
  -o-transform:scale(4,2);
  -ms-transform:scale(4,2);
  transform:scale(4,2);
}
</style>

<div id="cavas1">
外湖富商高赞的女儿高秋芳，聪明俊美，被父母视为掌上明珠。高赞夫妇为爱女择婿费尽心机，登门参试者甚多，但都不中意。宦门公子颜俊，不学无术，恃财仗势，选美寻欢。在庙会上，颜俊见秋芳貌美，欲以金钱取得她的欢心，虽遭碰壁，却不死心。于是，他指使其债户果子铺掌柜尤辰，前往高府骗婚。不料高赞择婿严谨，定要会文相婿。颜俊腹中无墨，又怕高家认出他是追赶高小姐的无耻之徒，便想出移花接木之计，假以会文为名，蒙骗其表弟钱青冒名顶替，到高府应试。相亲宴上，秋芳乔装改扮，亲赴席前送酒试才。高赞见钱青才貌出众，欣然允亲。吉日将临，高赞定要佳婿亲自迎娶。颜俊唯恐真情败露，再次请钱青帮助。钱青正为替他相亲之事悔恨不已，拒不替他迎亲。后来，颜母亲自出面，迫使钱青应允。钱青万般无奈，违心从命。迎亲之日，高府宾客满座，盛情款待，忽然，天气突变，风雪交加，湖水浪涌，无法行船，高赞恐误吉日良辰，执意在他家拜堂成亲。迎亲者自知不妥，但又不能言明，只得拜天地，入洞房。秋芳夙愿得偿，感到无比幸福，对钱青关怀备至。可是，钱青悔恨交加，不知所措。花烛之夜，一对新人，各怀心事，痛苦地坐到天明。颜俊得知钱青与高秋芳已拜堂成亲，怒不可遏，硬拉钱青上公堂，告钱青骗婚占妻之罪。高赞得知真情，也拉尤辰到公堂论理。知县在夫人的协助下，审明案情，惩戒了颜俊，成全了钱青与秋芳的姻缘。
</div>

测试结果：Internet Explorer 9，Firefox 4，Opera 11，Safari 5，Chrome 10 都支持该属性。

点击查看例子 6 的效果

例子 7：

<style>
#cavas1
{
  width:300px;border:2px solid orange;margin:300px;padding:10px;line-height:1.4em;text-align:center;
  -moz-transform:scaleX(2);
  -webkit-transform:scaleX(2);
  -o-transform:scaleX(2);
  -ms-transform:scaleX(2);
  transform:scaleX(2);
}
</style>

<div id="cavas1">
<img src="http://dotnet.aspx.cc/Images/logoSite.gif" />
</div>

测试结果：Internet Explorer 9，Firefox 4，Opera 11，Safari 5，Chrome 10 都支持该属性。

点击查看例子 7 的效果

例子 8：

<style>
#cavas1
{
  width:300px;border:2px solid orange;margin:300px;padding:10px;line-height:1.4em;text-align:center;
  -moz-transform:scaleY(2);
  -webkit-transform:scaleY(2);
  -o-transform:scaleY(2);
  -ms-transform:scaleY(2);
  transform:scaleY(2);
}
</style>

<div id="cavas1">
<img src="http://dotnet.aspx.cc/Images/logoSite.gif" />
</div>

测试结果：Internet Explorer 9，Firefox 4，Opera 11，Safari 5，Chrome 10 都支持该属性。

点击查看例子 8 的效果

例子 9：

<style>
#cavas1
{
  width:300px;border:2px solid orange;margin:300px;padding:10px;line-height:1.4em;text-align:center;
  -moz-transform:skewX(45deg);
  -webkit-transform:skewX(45deg);
  -o-transform:skewX(45deg);
  -ms-transform:skewX(45deg);
  transform:skewX(45deg);
}
</style>

<div id="cavas1">
<img src="http://dotnet.aspx.cc/Images/logoSite.gif" />
</div>

测试结果：Internet Explorer 9，Firefox 4，Opera 11，Safari 5，Chrome 10 都支持该属性。

点击查看例子 9 的效果

例子 10：

<style>
#cavas1
{
  width:300px;border:2px solid orange;margin:300px;padding:10px;line-height:1.4em;text-align:center;
  -moz-transform:skewY(45deg);
  -webkit-transform:skewY(45deg);
  -o-transform:skewY(45deg);
  -ms-transform:skewY(45deg);
  transform:skewY(45deg);
}
</style>

<div id="cavas1">
<img src="http://dotnet.aspx.cc/Images/logoSite.gif" />
</div>

测试结果：Internet Explorer 9，Firefox 4，Opera 11，Safari 5，Chrome 10 都支持该属性。

点击查看例子 10 的效果

例子 11：

<style>
#cavas1
{
  width:300px;border:2px solid orange;margin:300px;padding:10px;line-height:1.4em;text-align:center;
  -moz-transform:skew(30deg,20deg);
  -webkit-transform:skew(30deg,20deg);
  -o-transform:skew(30deg,20deg);
  -ms-transform:skew(30deg,20deg);
  transform:skew(30deg,20deg);
}
</style>

<div id="cavas1">
<img src="http://dotnet.aspx.cc/Images/logoSite.gif" />
</div>

测试结果：Internet Explorer 9，Firefox 4，Opera 11，Safari 5，Chrome 10 都支持该属性。

点击查看例子 11 的效果

本属性最后更新时间：2011-05-04 10:55:21