日期:2014-04-22 浏览次数:21473 次
文章简介:在这篇文章,回顾了CSS3的transform的基本知识,然后深入介绍了transform-origin的相关知识。 |
在CSS2.1中,我们的页面都是静态的,网页设计师也习惯把它作为页面效果的设计工具。但往往有些页面效果不只是静态的,比如说,如何实际移动一些元素?如何更改元素的外观——旋转或缩放?
多年来,Web设计师为了给修改页面的外观,都依赖于图片、Flash或JavaScript才能完成。不过,CSS3将要改变设计师这种思维,进入CSS3时代,借助CSS3就可以轻松倾斜、缩放、移动以及翻转元素。
在2011年05月在站上发表了第一篇有关于CSS3 Transform教程,现已时隔近两年,有很多东西都有变化,而且理解也略有不同,接下来将会分几篇教程,向大家介绍CSS3 Transform相关的知识。
2012年9月,W3C组织发布了CSS3变形工作草案。CSS3变形允许CSS把元素转变为2D 或3D空间,这个草案包括了CSS3 2D变形和CSS3 3D变形。
CSS3变形是一些效果的集合,比如平移、旋转、缩放和倾斜效果,每个效果都被称作为变形函数(Transform Function),它们可以操控元素发生旋转、缩放、和平移等变化。这些效果在之前都需要依赖图片、Flash或JavaScript才能完成。而使用纯CSS来完成这些变形则无需加载这些额外的文件,再一次提升了你的开发效率,还提高了页面的执行效率。
CSS变形允许您动态的控制元素。您可以在屏幕周围移动它们,缩小或扩大,旋转,或结合所有这些产生复杂的动画效果。通过CSS变形,可以让元素生成静态视觉效果,但也可以很容易结合CSS3的transition和动画的keyframe产生一些动画效果。在本章中,首先介绍简单的2D变形,然后向您展示如何扩展转换成3D变形。
transform
属性指一组转