3d图片轮播--原理到实现

来源：互联网发布：聊城seo研究中心编辑：程序博客网时间：2024/05/01 23:46

计划将现代网站上的特效实现一遍，不使用任何框架，如bootstrap之类的，框架天天不同，但底层是不会变化太大的。

3d图片轮播主要技术点为：

一、理解好3维坐标轴，可参考https://www.w3.org/Talks/2012/0416-CSS-WWW2012/Demos/transforms/demo-rotate3d.html；

二、理解和正确使用css3中的rotate和translate的3D属性，注意转动时，坐标轴发生的变化；

三、高中三维几何知识；

四、要设置舞台，可用DIV来设置，为这舞台设置perspective为图片总宽度，要不看不到效果；

五、图片全设置为绝对位置，若是相对，则出现DNA螺旋纹，CSS的BOX概念。

动画描述：

一、点击左按钮，六张图片顺时针转60度，当转完一圈时不能再转；

二、点击右按钮，六张图片逆时针转60度，当转完一圈时不能再转；

三、从左开始；

预览

点击打开链接

效果

代码如下：

<!DOCTYPE html><html><head><title>3dpic</title><script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script></head><style type="text/css">body{margin: 0,auto;}.stage{width: 1368px;transform-style: preserve-3d;border: solid 1px red;border-radius: 10px;perspective:1368px;height: 500px;padding-left: 40%;}</style><body><div class ="stage"><br><br><img src="images/1.jpg" alt=""  rotate=0 width="200" style="position:absolute;transform: rotateY(0deg) translateZ(193.2px) ">    <img src="images/2.jpg" alt=""  rotate=60 width="200" style="position:absolute;transform: rotateY(60deg) translateZ(193.2px)">   <img src="images/3.jpg" alt=""  rotate=120 width="200" style="position:absolute;transform: rotateY(120deg) translateZ(193.2px)">  <img src="images/4.jpg" alt=""  rotate=180 width="200" style="position:absolute;transform: rotateY(180deg) translateZ(193.2px)">  <img src="images/5.jpg" alt=""  rotate=240 width="200" style="position:absolute;transform: rotateY(240deg) translateZ(193.2px)">  <img src="images/6.jpg" alt=""  rotate=300 width="200" style="position:absolute;transform: rotateY(300deg) translateZ(193.2px)"><br><div style="margin: 0 auto;text-align: center;"><button id='left'>left</button><button id='right'>right</button></div></div></body></html><script type="text/javascript">var r = 100 / Math.tan(30 / 180 * Math.PI);console.log(r);var currentNode=0;$('#left').click(function(){if(parseInt(currentNode)==6)return;currentNode++;console.log(currentNode);var rotate=$('img:nth('+currentNode+')').attr('rotate');var deg=parseInt (rotate)-60;$('img:nth('+currentNode+')').css('transition','2s').css('transform', 'rotateY('+deg+'deg) translateZ(193.2px)');$('img:nth('+currentNode+')').attr('rotate',deg);for(var i=currentNode+1;i<6;i++){var rotate=$('img:nth('+i+')').attr('rotate');deg=parseInt (rotate)-60;$('img:nth('+i+')').css('transition','2s').css('transform', 'rotateY('+deg+'deg) translateZ(193.2px)');$('img:nth('+i+')').attr('rotate',deg);}for(var i=currentNode-1;i>-1;i--){var rotate=$('img:nth('+i+')').attr('rotate');deg=parseInt(rotate)-60;$('img:nth('+i+')').attr('rotate',deg);$('img:nth('+i+')').css('transition','2s').css('transform', 'rotateY('+deg+'deg) translateZ(193.2px)');}});$('#right').click(function(){if(parseInt(currentNode)==0)return;currentNode--;console.log(currentNode);var rotate=$('img:nth('+currentNode+')').attr('rotate');var deg=parseInt (rotate)+60;$('img:nth('+currentNode+')').css('transition','2s').css('transform', 'rotateY('+deg+'deg) translateZ(193.2px)');$('img:nth('+currentNode+')').attr('rotate',deg);for(var i=currentNode+1;i<6;i++){var rotate=$('img:nth('+i+')').attr('rotate');deg=parseInt (rotate)+60;$('img:nth('+i+')').css('transition','2s').css('transform', 'rotateY('+deg+'deg) translateZ(193.2px)');$('img:nth('+i+')').attr('rotate',deg);}for(var i=currentNode-1;i>-1;i--){var rotate=$('img:nth('+i+')').attr('rotate');deg=parseInt(rotate)+60;$('img:nth('+i+')').attr('rotate',deg);$('img:nth('+i+')').css('transition','2s').css('transform', 'rotateY('+deg+'deg) translateZ(193.2px)');}});</script>

0 0