超炫CSS3过渡及3D立体动作特效演示案例

CSS是现代网页设计中很重要的一个组成部分，好的CSS过渡转场动作和动画效果可以增强网页动感，提升网站的吸引度，可以很好地提升用户体验。我们可以在很多鼠标悬停、点击等动作上看到CSS特效。CSS 3是CSS的下一代升级版本，它将这一切又提升到了一个新的高度，可以让网页设计师们做出更酷更炫的网页特效，包括3D效果，更强的过渡特效等。本文收集了一些用CSS3制作的各种很酷很炫的网页特效，希望给做下一代HTML5+CSS3的网页设计师们提供一些参考，擦出一些创意的火花。

苹果iPhone 4S页面动画特效原理

苹果的iPhone 4S的Banner过渡特效很酷，此案例演示了iPhone 4S过渡的特效及原理。

iPad 3D旋转带表面光线变化特效

有很多iPad的图片设计都可以看到其表面的光线效果。这个CSS3案例展示了光线照在iPad，并且光线会随着iPad的立体旋转发生动态变化，共使用了包括3-D transform、渐变和遮罩等CSS 3特效。

生成3D云彩的CSS 3特效

此案例用CSS 3根据需要生成3D立体的云朵。你可以修改设置需要多少白色云朵、多少乌云，模拟蓝天白云、或乌云密布的天空。云朵会随着鼠标移动旋转，3D效果很强。很值得学习！

照片动态折叠CSS特效

很好的照片交互动态效果，当鼠标指针移动到照片上时，照片会显示折叠效果，并在右侧显示分享按钮供用户做进一步操作。此案例很好地应用了CSS的3D变形效果，提供了4种照片折叠的效果。

十二面体立体旋转变形特效

这个案例使用了CSS3和JavaScript，移动鼠标指针拨动屏幕上的十二面体产生立体旋转特效，十二面体在动画停止时破裂展开。是一个很好的复杂3D转动的案例。

3D折纸特效

此案例是一个将评论内容折叠，点击后像打开折叠的纸片一样显示评论内容的CSS 3特效，有很强的3D效果。

CSS 3生成动态图像动画特效

此案例中看到的画面中没有使用任何图片，动画中的图像全部由CSS 3生成，并且是完整的动画效果。不可思议！

[除非注明，tech迷文章均为原创，转载请以链接形式标明本文地址]

转载于:https://www.cnblogs.com/techolics/archive/2012/07/03/css3-3d-plugin.html