注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

前端攻城师 郭培的博客

Be the best you can

 
 
 

日志

 
 
关于我

前端技术:http://hszy00232.blog.163.com/ 前端设计:http://blog.sina.com.cn/hsjs00232 职业:web前端工程师 现居地:北京 My QQ:365246295 Mail:hszy00232@163.com

网易考拉推荐

transform使用参考指南  

2010-09-18 16:06:33|  分类: html5+css3 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
语法

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使用参考指南 - 郭培 - 前端工程师 郭培的博客
 
示例

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);}

效果图如下:
transform使用参考指南 - 郭培 - 前端工程师 郭培的博客
.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设定了变换源点*/}

效果图如下:
transform使用参考指南 - 郭培 - 前端工程师 郭培的博客

 
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);}

效果图如下:
transform使用参考指南 - 郭培 - 前端工程师 郭培的博客
.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设定了变换源点*/}

效果图如下:
transform使用参考指南 - 郭培 - 前端工程师 郭培的博客

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);}

效果图如下:
transform使用参考指南 - 郭培 - 前端工程师 郭培的博客

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);}

效果图如下:
transform使用参考指南 - 郭培 - 前端工程师 郭培的博客
.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设定变换源点*/}

效果图如下:
transform使用参考指南 - 郭培 - 前端工程师 郭培的博客

 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);}

效果图如下:
transform使用参考指南 - 郭培 - 前端工程师 郭培的博客

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


 

  评论这张
 
阅读(48214)| 评论(3)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017