html5中文学习网

您的位置: 首页 > 视频教程 > CSS3视频教程 » 正文

CSS3(transform)实例之3D变换_HTML5中文网 - 我们以促进HTML5在中国的普及而努力

[ ] 已经帮助:人解决问题

 首先要了解transform属性相关知识,点击查看在线手册iysHTML5中文学习网 - HTML5先行者学习网


先看下效果图:iysHTML5中文学习网 - HTML5先行者学习网

CSS3 3D变换iysHTML5中文学习网 - HTML5先行者学习网
Demo演示地址iysHTML5中文学习网 - HTML5先行者学习网
浏览器:谷歌Chrome和Safari 4 +。iysHTML5中文学习网 - HTML5先行者学习网
iysHTML5中文学习网 - HTML5先行者学习网
在这里给大家介绍下transform的属性以及如何取值:
none: 无转换 
matrix(<number>,<number>,<number>,<number>,<number>,<number>): 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a,b,c,d,e,f]变换矩阵 
translate(<length>[, <length>]): 指定对象的2D translation(2D平移)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0 
translateX(<length>): 指定对象X轴(水平方向)的平移 
translateY(<length>): 指定对象Y轴(垂直方向)的平移 
rotate(<angle>): 指定对象的2D rotation(2D旋转),需先有transform-origin属性的定义 
scale(<number>[, <number>]): 指定对象的2D scale(2D缩放)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认取第一个参数的值 
scaleX(<number>): 指定对象X轴的(水平方向)缩放 
scaleY(<number>): 指定对象Y轴的(垂直方向)缩放 
skew(<angle> [, <angle>]): 指定对象skew transformation(斜切扭曲)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0 
skewX(<angle>): 指定对象X轴的(水平方向)扭曲 
skewY(<angle>): 指定对象Y轴的(垂直方向)扭曲 
(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助