原创力文档- 1、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。。
- 2、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
- 4、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
- 5、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
- 6、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 7、VIP文档为合作方或网友上传，每下载1次， 网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
;3.11 CSS3变形;在CSS3之前，如果需要为页面设置变形效果，需要依赖于图片、Flash或JavaScript才能完成。CSS3出现后 ，通过transform属性就可以实现变形效果，如移动、倾斜、缩放以及翻转元素等。;2012年9月，W3C组织发布了CSS3变形工作草案，这个草案包括了CSS3 2D变形和CSS3 3D变形。;CSS3的变形（transform)属性可以让元素在一个坐标系统中变形。这个属性包含一系列变形函数，可以进行元素的移动、旋转和缩放。;其中, transform属性的默认值为none，适用于内联元素和块元素，表示不进行变形。;具体说明如下：
matrix():定义矩形变换，即基于X和Y坐标重新定位元素的位置。
translate():移动元素对象，即基于X和Y坐标重新定位元素。
scale()：缩放元素对象，可以使任意元素对象尺寸发生变化，取值包括正数、负数和小数。
rotate():旋转元素对象，取值为一个度数值。
skew():倾斜元素对象，取值为一个度数值。
;matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。;matrix() 方法;使用 translate() 方法能够重新定义元素的坐标，实现平移的效果。
其基本语法格式如下：
transform:translate(x,y);
x指元素在水平方向上移动的距离，y指元素在垂直方向上移动的距离。;translate() 方法;rotate() 方法;rotate() 方法;scale() 方法;scale() 方法;skew() 方法;skew() 方法;3D转换;rotateX() 方法;rotateX() 方法;rotateY() 旋转;transform-origin;transform-origin;transform-origin;下面我们通过一个短视频来直观地查看一下transform的属性效果演示。（插入录屏视频2）
另外，CSS3中还包含很多转换的方法，运用这些方法可以实现不同的转换效果。比如,perspective属性规定3D元素的透视效果，transform-style属性规定元素在3D空间中的显示方式，等等。;总结与思维启发
文档评论（0）