css33d图片轮播_css3实践之图片轮播（Transform，Transition和Animation）

楼主喜欢追求视觉上的享受，虽常以牺牲性能无法兼容为代价却也乐此不疲。本文就通过一个个的demo演示来简单了解下css3下的Transform，Transition和Animation。

本文需要实现效果：(请用chrome打开)

Transform

根据我的理解，transform和width、height、background一样，都是dom的属性，不同的是它是css3旗下的，比较屌，能够对原来的dom元素进行移动、缩放、转动、拉长或拉伸，跟canvas上的某些api神似，这么说来transform好像能干些js才能干的事。

transform分2D变换和3D变换，w3school中有很好的介绍和例子，具体请猛戳：CSS3 2D 转换  CSS3 3D 转换

为了方便查找，我把w3school上的截图在这里保存一份：

Transition

transition的解释是过渡，我的理解是css之间的变换，但是这个变换很屌很平滑，类似动画。举个栗子，一开始某个dom的类是classA，通过某种操作(比如被点击了)后变成了classB，如果没有transition，类之间的变换是很快的，机械般瞬间完成，但是有了transition，这便会是一个很缓和平滑的过程。

我们通过demo来讲解transition的使用方式。

写好如下的html文件：