CSS3（transform）实例之3D变换_H5之家 - 中国HTML5教程资源分享第一站

css3入门

字号+ 作者：admin 来源： 2014-11-16 21:49 我要评论( )

首先要了解 transform 属性相关知识，点击查看在线手册先看下效果图: Demo演示地址浏览器：谷歌Chrome和Safari 4 +。在这里给大家介绍下transform的属性以及如何取值： none：无转换 matr

首先要了解transform属性相关知识，浏览器：谷歌Chrome和Safari 4 +。

在这里给大家介绍下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轴的（垂直方向）扭曲

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

网友点评

精彩导读

${CSS}网站配色,CSS主色调配色方案_div+css布局教程$

${CSS}DIV CSS制作的个性水平导航菜单实例_div+css布局教程$

${CSS}总结新手学CSS轻易出现错误的内容_div+css布局教程$

${CSS}关于学习DIV CSS的一些精妙问答_div+css布局教程$

${CSS}学习CSS布局网页的一些实例_div+css布局教程$

热门资讯

关注我们

关注微信公众号，了解最新精彩内容