css
* { margin: 0; padding: 0; list-style: none; } body { background: url(img/timg.jpg) repeat; background-size: 100px 100px; text-align: center; color: #fff; } .container { width: 300px; height: 300px; margin: 50px auto; perspective: 1000px; //景深 } .container .cube{ position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: all 2s; } .container .cube li{ position: absolute; width: 100%; height: 100%; border: 5px solid rgba(255,255,255, .4); } .container .cube li img{ width: 100%; height: 100%; } .container .cube li.img1{ transform: rotateY(0deg) translateZ(150px); } .container .cube li.img2{ transform: rotateX(180deg) translateZ(150px); } .container .cube li.img3{ transform: rotateY(90deg) translateZ(150px); } .container .cube li.img4{ transform: rotateY(-90deg) translateZ(150px); } .container .cube li.img5{ transform: rotateX(90deg) translateZ(150px); } .container .cube li.img6{ transform: rotateX(-90deg) translateZ(150px); } .cube.init { transform: translateZ(-200px) rotateX(-15deg) rotateY(18deg); } .btnArea { display: grid; grid-template-columns: 105px 105px 105px; grid-template-rows: 85px 85px; justify-content: center; grid-gap: 15px; } .btnArea input { width: 105px; height: 85px; outline: none; border: 2px solid #fff; } .btnArea input:focus { border: 2px solid darkblue; } .cube.show-image-1 { transform: translateZ(-200px) ; } .cube.show-image-2 { transform: translateZ(-200px) rotateX(-180deg); } .cube.show-image-3 { transform: translateZ(-200px) rotateY(-90deg); } .cube.show-image-4 { transform: translateZ(-200px) rotateY(90deg); } .cube.show-image-5 { transform: translateZ(-200px) rotateX(-90deg); } .cube.show-image-6 { transform: translateZ(-200px) rotateX(90deg); }
html javascript
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="./index.css" /> </head> <body> <div class="container"> <ul class="cube init"> <li class="img1"><img src="img/a.jpg"></li> <li class="img2"><img src="img/b.jpg"></li> <li class="img3"><img src="img/c.jpg"></li> <li class="img4"><img src="img/d.jpg"></li> <li class="img5"><img src="img/e.jpg"></li> <li class="img6"><img src="img/f.jpg"></li> </ul> </div> <h2>点击下面图片旋转</h2> <div class="btnArea"> <input type="image" src="img/a.jpg" id="show-image-1" /> <input type="image" src="img/b.jpg" id="show-image-2" /> <input type="image" src="img/c.jpg" id="show-image-3" /> <input type="image" src="img/d.jpg" id="show-image-4" /> <input type="image" src="img/e.jpg" id="show-image-5" /> <input type="image" src="img/f.jpg" id="show-image-6" /> </div> <script type="text/javascript"> (function() { var btnArea = document.getElementsByClassName('btnArea')[0]; var cubeNode = document.getElementsByClassName('cube')[0]; var currentList = cubeNode.classList; //获取类名列表 类数组集合 var initClass = currentList[1]; var index = 1; var time; btnArea.addEventListener('click', function(e) { var e = e || window.event; var target = e.target || e.srcElement; var current = target.id; clearInterval(timer); if (current.length > 0 && current != initClass) { currentList.replace(initClass, current); initClass = current; } index = parseInt(current[11]) + 1; autoPlay(); }, false); function autoPlay() { timer = setInterval(function() { if(index > 6) { index = 1; } var current = 'show-image-' + index; currentList.replace(initClass, current); initClass = current; index++; }, 3000); } autoPlay(); }()) </script> </body> </html>