CSS3/jQuery3D万花筒旋转动画特效插件

CSS3/jQuery3D万花筒旋转动画特效插件是一款可以让你的页面轻松拥有万花筒显示图片的插件,适用于jquery和CSS3,可以快速的制作这一动画特效.有需要的朋友就来IT猫扑下载吧!

jQuery3D万花筒旋转动画特效插件简介

jQuery3D万花筒插件,一款使用jquery和CSS3来制作的炫酷的带倒影的3D万花筒旋转动画特效。该3D万花筒特效通过简单的CSS transform和jquery代码来实现在用户鼠标按下时，万花筒图片可以跟随鼠标进行3D旋转动画。

jQuery万花筒插件使用方法

在页面底部，标签结束之前，引入jquery文件。

HTML结构

该3D万花筒旋转动画特效的基本HTML结构如下

CSS样式

设置全局样式如下

为3D万花筒容器元素.pic设置固定的宽度和高度，然后通过transform属性来依次设置透视效果perspective为800像素，绕X轴旋转rotateX()-10度，绕Y轴旋转rotateY()0度。

然后为每一张图片设置box-shadow阴影效果，以及使用-webkit-box-reflect属性来制作阴影效果。

容器中空的

元素用于制作一个椭圆形渐变效果。

JavaScript

在页面DOM元素加载完毕之后，使用下面的方法来初始化该3D万花筒特效。