呵呵又来一个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内核是不支持的。

今天在《Web页面的纹理背景设计与资源》一文中向大家推荐了一些有关于Web上的纹理背景资源以及制作工具等，其中Lea Verou大师使用纯CSS3制作的纹理背景最吸引我，于是我花了几天的时间整理了一份37种CSS3制作的纹理背景图。这份DEMO能兼容Webkit和Firefox浏览器，其他浏览器没有测试（Lea Verou只能在firefox显示正常），虽然很多代码是copy了Lea Verou大师的，但还是从中学到了不少东西，最起码对CSS3的渐变和背景尺寸等属性有了进一步的了解与加深，现在整理出源码与大家分享。希望大家喜欢。

本实例主要是对:before及:after的应用，比较初级，浅显易懂，适合入门。第一个使用border-left和负margin，跟css3没有关系，就是应用了rgba这个属性，使border的颜色有一定的透明值；第二个运用:before和:after生成两个三角叠加起来；第三个背景应用了linear-gradient，然后加上:before和:after生成的三角左右两边各一个；第四个则应用了:after生成元素，然后box-shadow生成阴影，再加上rotate旋转一点角度。这四个虽然比较简单，但是还是非常实用的。

这里总共有四种面包屑效果，其中第一种运用:before和:after，运用border生成同等大小的尖角，叠加起来左右错动1px；第二个还是运用:before和:after，运用border生成不同的尖角，一个在左一个在右；第三个是运用一个:after生成一个正方形，设置border-radius然后rotate旋转45度；第四个直接运用水平扭曲就skewX就可以了。

这是第三个tabs的标题设计了，这次应用的又跟上两个不是一样的技术。这里用了:after来生成了，然后对生成的内容水平方向上扭曲skewX来达到斜切的效果。当然li的margin距离要刚好等于生成a:after生成内容的宽度。然后就是注意box-shadow了。注意火狐14.0更新后，skew得写成skewX或skewY分别表示水平方向和竖直方向偏移，这里它的demo用的是skew，所以火狐下并没有斜切的效果，我们可以firebug手动添加。