再来一个3D的案例，本实例自谷歌，技术自然不用说了，那是一级棒。个人能力有限，我就挑简单的分析下呵呵。说下这个正方体的实现吧，先设置父级元素的transform-style:preserve-3d，然后定义各个面的宽高及绝对定位并设置scale3D为1.2倍，最后就是把各个面分别运用rotateX，rotateY，再运用translateZ拉开距离。至于旋转的运动则是设置父元素的animation从0到360deg的旋转。既然是google的案例，那肯定不支持火狐啊，不过只要换个前缀火狐也不是问题吧。

本实例主要是比较好看哈哈，然后使用了css3初级学习者一般不理解的:target这个伪元素，所以收纳。运用的css3有gradient生成渐变背景，:before生成前面的图标及二级菜单的箭头，:target来实现折叠效果，同时还应用了个transition来改变opacity的动画。当然这个案例其实左边的小图标还可以用font-face来制作，那样就更好了。

本实例主要应用了border-radius，transition，font-face。先设置一个宽度并设置overflow为hidden，然后鼠标滑过用transition来改变其宽度，以显示文字信息部分。至于三个icon，前面两个为font-face做的，后面一个为图片。

本实例主要应用gradient，然后使用box-shadow和border-raidus生成一个看起来很酷的按钮。然后download文字和版本文字分为两层，download文字层的z-index大于版本文字的z-index，鼠标滑过的时候改变download文字的宽度，露出下面的版本文字层。

呵呵又来一个3D制作，就不相信搞不定3D是吧。多看几个demo，多实践下，整个简单的3D原来也没想象的那么难的，还是可以搞定的。这个案例出现的还是很早的，只是当时只拿来欣赏吧，现在终于可以拿过来分析分析了。本实例先给li元素设置一个透视值为500px，然后给图片和文字信息都设置一个Y轴上的旋转30度，即rotateY(30deg)，然后要实现文字和图片有个层级的效果，就给文字设置了Z轴上的偏移,即translateZ(30px)，这样一个3D效果就出来了，至于动画部分就是hover的时候rotateY为0。这个demo问世的时候只有谷歌浏览器支持，所以请用google浏览器查看效果，至于download的文件已经经过我的修改，不过鼠标滑过的时候还是有bug，不太明白为什么，希望高手可以指点下。

再来一个css3 3D效果的实例，哈哈。今天在群里看到有人推荐张鑫旭的css3 3D文章，去看了下，太棒了，想学css3 3D特效的必备学习参考资料啊，所以晚上回来更新了下上一篇文章，把那篇文章的地址贴进去了。顺便再来一个css3 3D特效，不管会不会，观赏下开开眼界吧。注意demo为wekit版本（为了尊重作者我们贴出的demo地址都为原来的地址，而download则全部从本站下站），如需查看火狐版请download

这是个3D的切换效果，不太明白，在我的概念里还没有建立好一个3D模型，不知道如何把一个二维的图形如何转成三维。更谈不上动画了，所以这个案例对于我来说，暂时只是欣赏。如有明白的可以给讲一下，先谢过。

其实这个的大背景运用和之前背景运动的那个demo，核心点都是一样的，关键就是animation对背景定位的改变。只不过这里我们在一个标签中同时应用了三张图片，注意多背景图片时其层次与其书写顺序有关，其层次高低随着书写顺序依次递减，所以第一张图片在最高层，所以这个时候千万不要定义背景色啊，不然会把后面的全部覆盖了。如果要写背景色的话，请在最后一张图片上面加上。同理你可以做个简单的飘雪或蒲公英散落等一些零散的效果，当然首先得把背景图片设计好。

本实例的思路和之前说的用radio来控制手风琴效果有异曲同工之效。主要应用radio单选按钮来确认状态，然后对这个状态下的兄弟元素进行css控制。当然这里不比手风琴有几个radio就有几个内容，这里是一个内容，所以所有的radio应该和这个内容是兄弟元素，以便使用兄弟元素选择器~。然后对各个状态下的内容进行css控制，或显示或隐藏或浮动等。

本实例通过:before和:after生成高度和宽度透明度都为0且背景为渐变的两个内容，两个不同点在于绝对定位的位置一个为left，一个为right，然后渐变背景的方向刚好相反；最后当鼠标滑过改变高度宽度及透明度，就完成了该动画。因为是对:hover状态下的:before和:after生成的内容进行宽度变化，所以该实例如同先前的那个:hover状态下的激发伪元素动画一样，webkit内核是不支持的。