本示例给出了只利用CSS3的动画属性制作下图所示的轮播图特效的步骤。
Step 1：定义用来展示效果的容器div
（1）设置其背景色
（2）让其大小与浏览器的比例合适，并且让其水平、垂直居中；
例如：
图1 Step1效果图
Step 2：在div内图片
（1）插入一个div，让其作为动画的元素的容器；调整其大小与外层div的比例合适，并且给其定位；
（2）在插入的内层div内插入一张图片，让其大小充满div。
例如
：
图2 Step2效果图
Step 3：利用“@keyframes”，创建动画
可参考“@keyframes”属性的介绍：CSS @keyframes 规则/cssref/pr_keyframes.asp 可参考“transform”属性的介绍：CSS transform 属性/cssref/pr_transform.asp（1）定义动画名称，这里是“myAnimation”
（2）定义开始和结束时的动画效果。这里是从0度到360度以y轴方向旋转。
例如：
Step 4：利用“animation”属性绑定动画
可参考“transform”属性的介绍：CSS animation 属性/cssref/pr_animation.asp这里为ponent绑定。绑定步骤是：
（1）设置需要绑定到元素的 keyframe 名称
（2）规定完成动画所花费的时间；
（3）规定动画的速度曲线；
（4）规定在动画开始之前的延迟；
（5）规定动画应该播放的次数，infinite为无限次播放；
（6）规定是否应该反向播放动画
例如：
（动画截图看不大清楚，就不截图了），可以自行看效果。
Step 5：设置并保存图片的3D位置效果
可参考“transform-style”属性的介绍：CSS transform-style 属性/cssref/pr_transform-style.asp（1）在ponent{}内加入“transform-style”属性，以保存子元素的3D位置；
例如：
（2）在img{}内加入“transform:rotatey(0deg) translatez(400px);”
例如：
Step 6：使用“perspective”和“perspective-origin”定义视角
我们现在已经可以看到图片在动了，但是只是一边旋转一边水平的移动。我们可以通过定义视角来增强动画的立体效果。
可参考“perspective”属性的介绍：CSS perspective 属性/cssref/pr_perspective.asp（可参考“perspective-origin”属性的介绍：CSS perspective-origin 属性）
（1）为外层容器定义观赏视角。在div.content中加入下面的两行代码，用以定义视角。
至此，我们已经制作完成了图片的动画效果，可以进一步调整属性值，以提高动画显示效果。
Step 7：多图轮播
以上只是一个图片的动画，现在我们来增加一些图片。完整的代码如下：
这个效果不是我们想要的样子，这个有点像麻花。这是因为我们的图片动画后被看作块元素。这时我们得对它绝对定位。默认的是0。在img{}里增加“position: absolute;”即可。最后再调整一下属性值，轮播图就做好了。
（示例中用的是同一张图片，示例中没有给图片添加超链接，回头自行添加吧。）
