每2个框（即当前框的数目为2的倍数时）向右倾斜4度，距离顶部的偏移量为5像素（top:5px）。每3个框（即当前框的数目为3的倍数时）向左偏移3度，每5个框（即当前框的数目为5的倍数时）向右倾斜5度，距离底部的偏移量为10像素。总的来看，便签的随机倾斜效果如下：
第四步：鼠标悬停时，便签放大
为了让便签引人注目，我们使用了加强了的投影效果，并用CSS3为便签添加了过渡效果。另外，我们需要为每一个浏览器定义过渡效果的scale值：
为确保放大的便签覆盖其它的，我们增大了z-index的值（增加到了5）。因为我们为它应用了：hover和：focus两个伪类，也就意味着当鼠标悬停，或使用键盘的tab键时，便签会产生放大的突出效果：
第五步：添加平滑过渡效果及颜色
最后一步是做一些小变化，让放大效果更平滑，更吸引人。我们使用CSS3中的过渡模型（transition）在不同的浏览器里实现这一效果：
从本质上讲，如果这些元素发生改变（译者注：当鼠标滑过时），不要马上切换到我们所定义效果，经过0.25秒或1秒的过渡时间，这样看起来才自然。另外，我们为这些框进行混色添加，每两个便签（ul li:nth-child（even））填充绿色，每三个便签（ul li:nth-child（3n））填充淡蓝色：
为了看到不同浏览器中所实现的效果，你最好将最后一个展示demo放在其它浏览器中试一下。
总结
我们的便签效果终于完成了，在没借助任何图片和JavaScript，我们实现了便签的倾斜和平滑动画效果。不过该效果只支持FireFox，Opera，Safari和Chrome浏览器，而老式浏览器是不支持倾斜和动画效果的。在nth-child选择器和CSS的变形效果，过渡效果帮助下，我们不用脚本同样达到了自己想要的效果。此外，Google的网络字体API对于自定义字体的使用很简单。hover和focus两个伪类的使用意味着用户通过键盘操作也能看到效果。（jaysming）
（举报）
