jQuery和CSS3炫酷3D图片视觉差特效_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

这是一款使用jQuery和CSS3制作的效果非常炫酷的3D图片视觉差特效。该视觉差特效模拟放风筝效果，以9只小鸟的图片作为风筝。这个界面可以随鼠标左右倾斜，8个风筝也会以不同的速度进行运动，组成强烈的3D视觉差效果。

制作方法

HTML结构

该视觉差效果的所有HTML元素都是通过js代码动态添加到<body>元素中。

CSS样式

该视觉差特效的CSS样式非常简单，只是简单的在CSS中设置了各个元素的背景图像。

body,html{
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: black;
}
#bg1{
  background: url(img/bg1.jpg) center center;
  background-size: contain;
}
#bg2{
  background: url(img/bg2.png) no-repeat;
  background-size: contain;
}
#cage{background: url(img/cage.png);}
#man{background: url(img/man.png);}
#bird1{background: url(img/bird1.png);}
#bird2{background: url(img/bird2.png);}
#bird3{background: url(img/bird3.png);}
#bird4{ background: url(img/bird4.png);}
#bird5{background: url(img/bird5.png);}
#bird6{background: url(img/bird6.png);}
#bird7{background: url(img/bird7.png);}
#bird8{background: url(img/bird8.png);}
#bird9{background: url(img/bird9.png);}

JAVASCRIPT

该插件依赖于Sprite3D.js插件，它可以制作出立方体效果。在js代码中，在init()方法中，首先制作了一个立方体容器。

container = Sprite3D.stage().appendChild(Sprite3D.box( 0, 0, 0, "cube" ));

然后往这个立方体容器中添加需要的HTML DOM元素。同时设置各个元素的尺寸和transform原点。

bg1 = container.appendChild(Sprite3D.create("bg1").size(ww,wh).y(-wh/2).x(-ww/2).z(0).update());
bg2 = container.appendChild(Sprite3D.create("bg2").size(ww/1.2,ww/12.17).y(wh/2-ww/11).x(-ww/2.4).z(60).update());

cage = container.appendChild(Sprite3D.create("cage").size(617,679).y(-309).x(-340).z(30).update());
man = container.appendChild(Sprite3D.create("man").size(617,679).y(-309).x(-340).z(80).update());

bird1 = container.appendChild(Sprite3D.create("bird1").size(617,679).y(-309).x(-340).z(80).transformOrigin(157,390).rotationX(30).update());
bird2 = container.appendChild(Sprite3D.create("bird2").size(617,679).y(-309).x(-340).z(80).transformOrigin(157,390).rotationX(30).update());
bird3 = container.appendChild(Sprite3D.create("bird3").size(617,679).y(-309).x(-340).z(80).transformOrigin(157,390).update());
bird4 = container.appendChild(Sprite3D.create("bird4").size(617,679).y(-309).x(-340).z(80).transformOrigin(157,390).rotationX(30).update());
bird5 = container.appendChild(Sprite3D.create("bird5").size(617,679).y(-309).x(-330).z(80).transformOrigin(157,395).rotationX(30).update());

bird6 = container.appendChild(Sprite3D.create("bird6").size(617,679).y(-309).x(-330).z(80).transformOrigin(414,368).update());
bird7 = container.appendChild(Sprite3D.create("bird7").size(617,679).y(-309).x(-330).z(80).transformOrigin(417,374).update());
bird8 = container.appendChild(Sprite3D.create("bird8").size(617,679).y(-309).x(-330).z(80).transformOrigin(419,372).update());
bird9 = container.appendChild(Sprite3D.create("bird9").size(617,679).y(-309).x(-340).z(80).transformOrigin(425,374).update());

接着为body添加mousemove事件监听，以根据鼠标的位置来旋转整个界面。

$("body").mousemove(function move(e){
  x = e.clientX;
  y = e.clientY;

  if(x<ww/2){
    x = Math.abs(x-ww/2);
    container.rotationY(-x/90).update();
  }

  if(x>ww/2){
    x = x-ww/2;
    container.rotationY(x/90).update();
  }
  if(y<wh/2){
    y = Math.abs(y-wh/2);
    container.rotationX(y/80).update();
  }
  if(y>wh/2){
    y = y-wh/2;
    container.rotationX(-y/80).update();
  }
});