transform使用参考指南

transform使用参考指南

2010-09-18 16:06:33|  分类： html5+css3|字号 订阅

 

 

语法

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

取值

指定一个身份转变

说明

应用于block水平和inline水平的元素。

transform可以对元素进行角度旋转和缩放,请使用webkit内核最新版浏览器浏览该文章以保证CSS3效果能够完全呈现

在设置了transform属性后，可以设置transform-origin属性，这个属性控制变形时的源点，也就是变形时围绕的点。这个属性接受两个参数，可以是百分比、top/center/bottom、带单位的数值。

兼容性

浏览器支持情况:-webkit-transform,-moz-transform,-o-transform,目前对CSS3动画支持的最好最全面的是webkit内核浏览器。

示例

transform的属性包括：rotate() / skew() / scale() / translate(,) ，分别还有x、y之分，比如：rotatex() 和 rotatey() ，以此类推。

有五种变形样式，可以重叠多种变形样式，以空格分隔

1.scale：缩放，1为原始大小。scale(x)。正数放大，负数缩小。属性值为一个时，x/y轴同时缩放；属性值为两个值时，分别控制x、y轴的缩放。

.scale{width:100px;height:50px;background:#f00;-webkit-transition:all .5s ease;color:#fff;border-radius:5px 5px;padding:5px;}
.scale:hover{-webkit-transform:scale(1.5);-moz-transform:scale(1.5);-o-transform:scale(1.5);}

效果图如下：

.scale{width:100px;height:50px;background:#f00;-webkit-transition:all .5s ease;color:#fff;border-radius:5px 5px;padding:5px;}
.scale:hover{-webkit-transform:scale(1.5);-moz-transform:scale(1.5);-o-transform:scale(1.5);-webkit-transform-origin:top center;/*-webkit-transform-origin设定了变换源点*/} 

效果图如下：

2.rotate：水平旋转，属性值格式为Xdeg。(deg是“度”的意思)rotate(Xdeg)。X为正数时，顺时针旋转；为负数时，逆时针旋转

.rotate{width:100px;height:50px;background:#f00;-webkit-transition:all .5s ease;
color:#fff;border-radius:5px 5px;padding:5px;}
.rotate:hover{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);
-o-transform:rotate(10deg);}

效果图如下：

.rotate{width:100px;height:50px;background:#f00;-webkit-transition:all .5s ease;
color:#fff;border-radius:5px 5px;padding:5px;}
.rotate:hover{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);
-o-transform:rotate(10deg);-webkit-transform-origin:top center;/*-webkit-transform-origin设定了变换源点*/}

效果图如下：

3.translate：定位元素，基于XY轴重新定位元素。translate(Xpx,Ypx)。属性值为一个时，x、y轴参数相同；为两个时，x、y轴分别定位

.translate{width:100px;height:50px;background:#f00;-webkit-transition:all .5s ease;
color:#fff;border-radius:5px 5px;padding:5px;}
.translate:hover{-webkit-transform:translate(10px,-10px);-moz-transform:translate(10px,-10px);
-o-transform:translate(10px,-10px);}

效果图如下：

4.skew：将元素沿水平方向倾斜变形。skew(Xdeg,Ydeg)。这个比较难表述，想象一下平行四边形吧。属性值为一个时，x、y轴参数相同；为两个时，x、y轴各自倾斜

.skew{width:100px;height:50px;background:#f00;-webkit-transition:all .5s ease;
color:#fff;border-radius:5px 5px;padding:5px;}
.skew:hover{-webkit-transform:skew(20deg,-10deg);-moz-transform:skew(20deg,-10deg);
-o-transform:skew(20deg,-10deg);}

效果图如下：

.skew{width:100px;height:50px;background:#f00;-webkit-transition:all .5s ease;
color:#fff;border-radius:5px 5px;padding:5px;}
.skew:hover{-webkit-transform:skew(20deg,-10deg);-moz-transform:skew(20deg,-10deg);
-o-transform:skew(20deg,-10deg);-webkit-transform-origin:top center;/*-webkit-transform-origin设定变换源点*/}

效果图如下：

5.matrix：矩阵，六个值。

.matrix{width:100px;height:50px;background:#f00;-webkit-transition:all .5s ease;
color:#fff;border-radius:5px 5px;padding:5px;}
.matrix:hover{-webkit-transform:matrix(1,-0.2,0,1,0,0);-moz-transform:matrix(1,-0.2,0,1,0,0);
-o-transform:matrix(1,-0.2,0,1,0,0);}

效果图如下：

来源：http://missdora.net/blog/2010-05/css3-transform