Javascript implements a 3D switching focus chart and javascript3d

Javascript implements a 3D switching focus chart and javascript3d

A small attempt was made to drag and drop with the mouse in combination with CSS3, as shown below:

Users familiar with Drag and Drop effects should be familiar with the implementation of left and right drag after holding the mouse.
In this demo, I tried to apply the related knowledge points in CSS3 to image display,
When you drag an image, it shows the stereoscopic effect ~~

The direct code is as follows:

#list{ width:400px; height:440px; margin:30px auto 30px; position:relative;z-index:500;}#list li{height:40px;width:400px; position:relative;cursor:pointer;-webkit-perspective:800px; }#list li div{height:40px;width:400px; -webkit-transform-style:preserve-3d;-webkit-backface-visibility:hidden;position:relative;-webkit-transform:translateZ(-200px);-webkit-transform:50ms all linear;}#list span{height:40px; width:400px; position:absolute;left:0;top:0; overflow:hidden;}#list div span:nth-child(1){background:url(img/1.jpg) no-repeat; -webkit-transform:translateZ(200px);}#list div span:nth-child(2){background:url(img/2.jpg) no-repeat;-webkit-transform-origin:right;-webkit-transform:translateZ(200px) rotateY(-90deg);}#list div span:nth-child(3){background:url(img/3.jpg) no-repeat;-webkit-transform-origin:right;-webkit-transform:translateZ(-200px);}#list div span:nth-child(4){background:url(img/4.jpg) no-repeat;-webkit-transform-origin:left;-webkit-transform:translateZ(200px) rotateY(90deg);}#list em{ width:400px;height:400px; position:absolute;left:0;background:#666;}#list li em:nth-of-type(1){-webkit-transform-origin:top;-webkit-transform:translateZ(200px) rotateX(-90deg); top:0;}#list li em:nth-of-type(2){-webkit-transform-origin:bottom;-webkit-transform:translateZ(200px) rotateX(90deg); bottom:0;}#list li:nth-last-child(1){ z-index:10;}#list li:nth-last-child(2){ z-index:20;}#list li:nth-last-child(3){ z-index:30;}#list li:nth-last-child(4){ z-index:40;}#list li:nth-last-child(5){ z-index:50;}#list li:nth-last-child(6){ z-index:60;}#list li:nth-child(2) span{ background-position:0 -40px;}#list li:nth-child(3) span{ background-position:0 -80px;}#list li:nth-child(4) span{ background-position:0 -120px;}#list li:nth-child(5) span{ background-position:0 -160px;}#list li:nth-child(6) span{ background-position:0 -200px;}#list li:nth-child(7) span{ background-position:0 -240px;}#list li:nth-child(8) span{ background-position:0 -280px;}#list li:nth-child(9) span{ background-position:0 -320px;}#list li:nth-child(10) span{ background-position:0 -360px;}#list li:nth-child(11) span{ background-position:0 -400px;}#btns{ width:130px; margin:0 auto;}#btns li{ width:20px;height:20px;background:#fff; font-size:14px; font-weight:bold; text-align:center; line-height:20px; float:left; color:#f60; margin:0 3px; cursor:pointer;}#btns .active{ background:#f60;color:#fff;}

HTML

<ul id="list"> <li>   <div>      <span></span>      <span></span>      <span></span>      <span></span>      <em></em>      <em></em>    </div>  </li>  <li>   <div>      <span></span>      <span></span>      <span></span>      <span></span>      <em></em>      <em></em>    </div>  </li>  <li>   <div>      <span></span>      <span></span>      <span></span>      <span></span>      <em></em>      <em></em>    </div>  </li>  <li>   <div>      <span></span>      <span></span>      <span></span>      <span></span>      <em></em>      <em></em>    </div>  </li>  <li>   <div>      <span></span>      <span></span>      <span></span>      <span></span>      <em></em>      <em></em>    </div>  </li>  <li>   <div>      <span></span>      <span></span>      <span></span>      <span></span>      <em></em>      <em></em>    </div>  </li>  <li>   <div>      <span></span>      <span></span>      <span></span>      <span></span>      <em></em>      <em></em>    </div>  </li>  <li>   <div>      <span></span>      <span></span>      <span></span>      <span></span>      <em></em>      <em></em>    </div>  </li>  <li>   <div>      <span></span>      <span></span>      <span></span>      <span></span>      <em></em>      <em></em>    </div>  </li>  <li>   <div>      <span></span>      <span></span>      <span></span>      <span></span>      <em></em>      <em></em>    </div>  </li>  <li>   <div>      <span></span>      <span></span>      <span></span>      <span></span>      <em></em>      <em></em>    </div>  </li></ul><ol id="btns"> <li class="active">1</li>  <li>2</li>  <li>3</li>  <li>4</li></ol>

JAVASCRIPT

Var oList = document. getElementById ("list"); var oBtns = document. getElementById ("btns"); tabPic (oList, oBtns); function tabPic (obj, btns) {var aLi = obj. getElementsByTagName ("li"); var aBtn = btns. getElementsByTagName ("li"); var oUl = document. getElementsByTagName ('ul ') [0]; var iDis = aLi [0]. offsetWidth; var iDeg = 90; aBtn. iNow = 0; for (var I = 0; I <aBtn. length; I ++) {oUl. title = aBtn [I]. title = 'Wonderful classroom -www.miaov.com '; aBtn [I ]. Index = I; aBtn [I]. onclick = function () {for (var I = 0; I <aLi. length; I ++) {starMove (aLi [I],-this. index * iDeg, aBtn) ;};}for (var I = 0; I <aLi. length; I ++) {aLi [I]. index = I; aLi [I]. iDeg = 0; aLi [I]. off = false; aLi [I]. onmousedown = function (ev) {if (this. off) {return;} var ev = event | ev; var iNowX = ev. clientX; var iNowDeg = 0; var oThis = this; var iLength = 0; var iMin = 0; var iMax = 0; document. onmousemove = function (e V) {if (Math. abs (iNowDeg)> = 80) {return;} var ev = event | ev; iNowDeg + = (ev. clientX-iNowX)/iDis * (iDeg-30); iLength = Math. abs (parseInt (iNowDeg/9); iMin = oThis. index-iLength> 0? OThis. index-iLength: 0; iMax = oThis. index + iLength <aLi. length? OThis. index + iLength: aLi. length-1; for (var I = iMin; I <= iMax; I ++) {aLi [I]. iDeg + = (ev. clientX-iNowX)/iDis * (iDeg-30); setDeg (aLi [I]);} iNowX = ev. clientX;} document. onmouseup = function () {var iEnd = 0; document. onmouseup = document. onmousemove = null; if (Math. abs (iNowDeg)> iDeg/4) {iEnd = iNowDeg> 0? 90-iNowDeg:-(90-Math.abs (iNowDeg);} else {iEnd =-iNowDeg;} iEnd = Math. round (iEnd + oThis. iDeg); for (var I = 0; I <aLi. length; I ++) {starMove (aLi [I], iEnd, aBtn) ;}} return false ;}}} function starMove (obj, iTarget, aBtn) {if (obj. timer) {clearInterval (obj. timer);} obj. off = true; var iSpeed = 0; var iNow = iTarget> = 0? Math. abs (aBtn. length-iTarget/90) % aBtn. length): Math. abs (iTarget/90) % aBtn. length); if (iNow! = ABtn. iNow) {aBtn [aBtn. iNow]. className = ""; aBtn. iNow = iNow; aBtn [aBtn. iNow]. className = "active";} obj. timer = setInterval (function () {iSpeed + = (iTarget-obj.iDeg)/12; iSpeed * = 0.86; if (Math. abs (obj. iDeg-iTarget) <0.5 & Math. abs (iSpeed) <0.5) {clearInterval (obj. timer); obj. iDeg = iTarget; obj. off = false;} else {obj. iDeg + = iSpeed;} setDeg (obj) ;}, 24);} function setDeg (obj) {var oDiv = obj. children [0]; with (oDiv. style) {WebkitTransform = "translateZ (-200px) rotateY (" + obj. iDeg + "deg )";}}

This effect is just an attempt. If you need a friend, you can leave a message below and send the source code.