你需要知道的CSS3 动画技术[译]
作者：神采飞扬 来源：前端观察 发布时间：2009-12-30 17:02:00
译序：本文译自Smashingmagazine，但是原文讲述的内容有些浅，也不是很完整，前端观察在翻译的前提下，增加了更多的更系统的内容。如有不足之处，欢迎指正补充。
随着网络的发展，浏览器具有更强的渲染更高级代码的能力，我们正逐步实现跨越所有平台和浏览器的目标。我们不但可以要花费更少的时间来确保我们的盒模型在IE6中看起来正常，而且形成了鼓励创新、避免hack、重前端脚本的氛围。
网络是一个非常好的环境，也是一个有丰富的知识来分享的协作社区。我们想要有圆角，我们就实现了它；我们想要多背景图片，我们实现了它；我们想要 边框图片，我们也让它实现了。所以需求从来不是问题，否则，我们可能还都仍然在使用table来布局页面而且使用过多的代码呢。我们都知道，网络无所不能。
为网络而生
CSS 3的属性比如border-radius、box-shadow和 text-shadow在webkit(Safari、Chrome等)和Gecko(Firefox)等先进的浏览器中的使用开始出现增长的势头。它们(这些CSS属性)已经为用户创建更轻量的页面和更丰富的体验，而且它们可以优雅的降级。然而，这些只是CSS 3能为我们做的众多事情中的一小部分。
在本文中，我们将走的更远，看一看 变形(transformation)、转换(transition)和动画(animation)等更高级的CSS3技术。我们将涉及代码本身、浏览器支持以及一些可以正确地展示这些新属性是如何即提升你的设计又增强整体用户体验的例子。
CSS 变形(Transformation)
CSS transformation是W3C的一个草案。但当我第一次坐下来阅读它的全部特性以了解一些东西的时候，它并没有让我感到开窍。你可以想象的到，这个文档是用技术术语的撰写的，而且它更关注变形的图形(比如绘图)元素和矩阵。大一学习微积分之后就没有碰过矩阵了，我必须为本章节做很多好的旧浏览器测试以及猜测和检验。
在看完我能找到的每一个教程和大量的浏览器测试之后，我总结出一些大家都能从中获益的有用的关于CSS变形的信息。
transform
transform属性实现了一些可用SVG实现的同样的功能。它可用于内联(inline)元素和块级(block)元素。它允许我们旋转、缩放和移动元素——只需要一行CSS代码。
一些前卫设计的最大诟病就是文字不可选(必须要使用切图的方法实现)。当你熟练使用transform属性来控制文字的时候，这就不再是问题了，因为这是个纯CSS方法，所以元素内的文字会保持可选。这是CSS相对于使用图片(或背景图片)的一个巨大优势。
一些有趣而有用的变形功能：
rotate
Rotate(旋转)允许你通过传递一个度数值来转动一个对象。scale
Scale是一个缩放功能，可以让任一元素变的更大。它使用正数和负数以及小数作为参数。translate
Translate就是基于X和Y 坐标重新定位元素skew
顾名思义，skew就是要将对象倾斜，参数是度数matrix
transform支持矩阵变换，就是基于X和Y 坐标重新定位元素
让我们更深入的了解每一个功能吧。
0
投稿猜你喜欢
在我的前一篇教程《九宫格基本布局》中，我介绍了用相对定位加绝对定位的方法来制作九宫格的基本布局。这是一种比较符合人们惯性思维的方法，好像制作- 在计算机中数据有两种特征：类型和长度。所谓数据类型就是以数据的表现方式和存储方式来划分的数据的种类。在SQL Server 中每个变量、参数
- 现在大家都在讨论Web2.0 ，大家都在搞用户行为前端设计，现在注册一个ID一般只需要几秒钟，站长期望其产生高价值的UGC，形成一个只需要审
- 登录页面能访问得到，但当执行下级目录的文件就不行了，浏览器直接跳出以下错误页面： 除些以外没有任何其它有价值的信息，因为此网站在我的电脑上执
- 这是一个很和谐很实用的网站管理程序，和我以前介绍的服务器管理程序不同的是，这个程序只有一个功能，就是实现远程Web方式删除文件（实际上是重命
- 目前SQL INJECTION的攻击测试愈演愈烈，很多大型的网站和论坛都相继被注入。这些网站一般使用的多为SQL SERVER数据库，正因为
- 一般事件事件浏览器支持描述onClickIE3|N2|O3鼠标点击事件，多用在某个对象控制的范围内的鼠标点击onDblClickIE4|N4
- 最近看到大家都练习写树，偶也学习学习写了一个，大家多多批评，我好进步。不过我看了一些树的xml文档都是在xml中就已经有了树的结构，所以我写
- 我们有时候看到一些文章因为一行的字符超长而把一些表格或DIV撑开或字符写到溢出了．如何防止表格防止撑开,表格不被内容撑开,单行字符超长div
- 在 MySQL 下，在进行中文模糊检索时，经常会返回一些与之不相关的记录，如查找 "％a％" 时，返回的可能有中文字符，
- 字体大小CSS2规范根据长度——水平和垂直尺寸——来定义字体。这个长度为一个数值，前面可能带一个可选的加(+)或减(-)标记符。另外，该数值
- 之前我写过一篇文章介绍如何实现中国站长站的文章干扰码功能：《谈中国站长站的文章干扰码实现方法》 首发在asp之家。如果大家有兴趣可以先看看。
- 我们的规范到底做到哪一步算是发挥良好的价值？其实一件事物我们理解错根本目的会导致出大不一样的结果，直接反应在设计师到底要体现什么的价值。想想
- 代码如下:Function htmll(mulu,htmlmulu,FileName,filefrom,htmla,htmlb,h
- 在Vista IIS 7 中用 vs2005 调试 Web 项目核心是要解决以下几个问题：1、Vista 自身在安全性方面的User Acc
- 那是一杠还是两杠呢？最简单的方式就是拿出钱包，掏出张“新”的50或100，翻到背面的银线上，就会发现两杠的符号。这个是以前跟同事在讨论是一杠
- 因为正则不够完善，所以代码中不能直接出现 <? 和 ?>如果是字符串，可以拆开写 "<" + &quo
- 如果您目前拥有一个冷备份，但是缺少了其中的一个数据文件，但你目前存在所有的归档，如果您要恢复数据文件，可以参考以下的示例：[oracle@j
- 作为一个非设计出生的研究思路偏向的设计师，带着少了设计师自恋和自怜的眼光，我记下最近一年来感受到的交互设计师的尴尬。交互设计师就是出界面的，
- SWFObject的使用是非常简单的，只需要包含 swfobject.js这个js文件，然后在DOM中插入一些简单的JS代码，就能嵌入Fla
