CSS3中3D综合应用及分析_html/css_WEB-ITnose

今天我要和大家一起来学习一个酷炫的鼠标Hover效果。主要将会涉及到CSS3中3D效果的使用，以及在实现过程中我们使用到的一些简单的转换算法，我会尽量以图解的形式让理论变得更容易理解。废话不多说，我们先看一下最终效果：Hover特效（http://www.seejs.com/demos/examples/3dcss3/）。打开连接，鼠标进入图片列表区域并移动鼠标，观察对应区域中内容浮层的变化效果，注意：请使用高级浏览器预览（推荐Chrome浏览器）。

});

});

最后，有一个比较迷惑的点就是CSS3旋转（rotate）中的（rotateX、rotateY、rotateZ）是相对于坐标轴而言的，例使用rotateX时，实际是围绕X轴做旋转，变化的效果作用在Y方向上，其余同理，所以仔细看以上代码，你会发现在设置style的时候rotate中的x和y我刻意交换了位置。你可以试试修改deg和translateZ参数，对比一下浏览效果，更容易理解其中的原理！行啦，大功告成，今晚可以睡个安稳觉了~~

作者：百码山庄网址：http://www.seejs.com/archives/766

文章来源：前端大全本站文章均由 HTML5梦工场 编辑从其他媒体精选HTML5相关文章转载，仅供网友学习和交流，如果我们的工作有侵犯到您的权益，请及时联系小编QQ：123464386，我们会在第一时间进行处理！

查看更多关于CSS3中3D综合应用及分析_html/css_WEB-ITnose的详细内容...