这个DEMO是来自于Red Team Design。这个站点是一个学习CSS3的好去处，简单明了，也是我常常去逛的一个网站。今天收到一个CSS3效果，就类似于一张图片四个角使用一个折角遮盖的效果。在整个效果制作中使用了两个标签配合“:after”和“:before”制作了四个折角，同时使用旋转transform以及定位到每个角落上，其中最难的一点就是，使用gradient制作了四个切角效果，这个效果在《CSS3+jQuery制作切角的Tabs》一文中有做过详细介绍。接下来将这个效果使用代码展现给大家。希望大家通过这个案例会有所收获。

这个案例是一个登录后个人信息控制面板，包含了个人用户头像，整个信息面板以及一个退出按钮。其中最有特色的是信息面板的下拉菜单使用CSS3的animation、transform制作了一个动感十强的效果。

这是一个使用CSS3中的transition和transform两个属性制作的一个动画下拉菜单效果，整个效果未采用任何js脚本代码，其中下接的折叠效果是通过transform的rotate来实现的，而transition是用来控制动画更具线性，当然这个效果也用到了transform的3d旋转属性，感兴趣的可以围观一下。扩大你自己的视野。

Lavalamp Menu是一种很好的效果，早期在国外的博客中看到过这种效果，是通过jquery插件制作的，一开始还不知道这种效果就叫Lavalamp呢？后来为之告诉我的，今天使用CSS3写了一个垂直的Lavalamp的导航效果，这个效果其实很简单，主要是ribbons的制作要点功夫，然手就是选择器的使用，如果你掌握了这两个部分的知识，那么制作这个效果只是一个思路问题，看看代码你就知道了。