JavaScript旋转方块
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>旋转立方体</title><style>* {margin: 0;padding: 0;list-style: none;}body,html {background-color: #080808;color: #fff;text-align: center;}.container {position: relative;width: 300px;height: 300px;margin: 50px auto 60px;perspective: 1000px;}.container .cube {width: 100%;height: 100%;transform-style: preserve-3d;/* transform: rotate3d(-1,1,1,30deg); *//* transition:all 1s; */transform: translateZ(-150px);transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);}.container .cube li {position: absolute;width: 100%;height: 100%;/* background-color: red; */border: 1px solid #fff;}/* 前 */.container .cube .img1 {transform: translateZ(150px);}/* 后 */.container .cube .img2 {transform: translateZ(-150px) rotateY(180deg);}/* 左 */.container .cube .img3 {transform: translateX(-150px) rotateY(-90deg);}/* 右 */.container .cube .img4 {transform: translateX(150px) rotateY(90deg);}/* 上 */.container .cube .img5 {transform: translateY(-150px) rotateX(90deg);}/* 下 */.container .cube .img6 {transform: translateY(150px) rotateX(-90deg);}.container .cube li img {width: auto;height: auto;max-width: 100%;max-height: 100%;display: block;margin: auto auto;}.container .cube.init {transform: translateZ(-150px) rotateX(-15deg) rotateY(30deg);}.container .cube.show-image-1 {transform: translateZ(-150px) rotateY(0deg)}.container .cube.show-image-2 {transform: translateZ(-150px) rotateY(180deg)}.container .cube.show-image-3 {transform: translateZ(-150px) rotateY(90deg)}.container .cube.show-image-4 {transform: translateZ(-150px) rotateY(-90deg)}.container .cube.show-image-5 {transform: translateZ(-150px) rotateX(-90deg)}.container .cube.show-image-6 {transform: translateZ(-150px) rotateX(90deg)}.btnList {margin: 50px auto;width: 200px;height: 150px;display: grid;grid-template-columns: 50px 50px 50px;grid-template-rows: 50px 50px;justify-content: center;grid-gap: 15px;}.btnList li input {width: 50px;height: 50px;outline: none;border: 2px solid #fff;transition: all 0.3s;border-radius: 5px;color: #fff;}.btnList li input:hover {transform: scale(1.2);}.btnList li input:focus {border-color: orangered;}h1{margin-top:50px;}</style></head><body><h1>旋转立方体</h1><div class="container"><ul class="cube init"><li class='img1'><img src="./img/monika01.jpg" alt="前 - 壹"></li><li class='img2'><img src="./img/monika02.jpg" alt="后 - 贰"></li><li class='img3'><img src="./img/monika03.jpg" alt="左 - 叁"></li><li class='img4'><img src="./img/monika04.jpg" alt="右 - 肆"></li><li class='img5'><img src="./img/monika05.jpg" alt="上 - 伍"></li><li class='img6'><img src="./img/monika06.jpg" alt="下 - 陆"></li></ul></div><h2>请点击下列图片方块</h2><ul class="btnList"><li><input type="image" alt='壹' src='./img/monika01.jpg' data-rotatex='0' data-rotatey='0' data-rotatez='0'data-class-name='show-image-1' class='show-image-1'></li><li><input type="image" alt='贰' src='./img/monika02.jpg' data-rotatex='0' data-rotatey='180' data-rotatez='0'data-class-name='show-image-2' class='show-image-2'></li><li><input type="image" alt='叁' src='./img/monika03.jpg' data-rotatex='0' data-rotatey='90' data-rotatez='0'data-class-name='show-image-3' class='show-image-3'></li><li><input type="image" alt='肆' src='./img/monika04.jpg' data-rotatex='0' data-rotatey='-90' data-rotatez='0'data-class-name='show-image-4' class='show-image-4'></li><li><input type="image" alt='伍' src='./img/monika05.jpg' data-rotatex='-90' data-rotatey='0' data-rotatez='0'data-class-name='show-image-5' class='show-image-5'></li><li><input type="image" alt='陆' src='./img/monika06.jpg' data-rotatex='90' data-rotatey='0' data-rotatez='0'data-class-name='show-image-6' class='show-image-6'></li></ul></body><script>(function () {let cube = document.getElementsByClassName('cube')[0];let inputs = document.getElementsByTagName('input');let classList = cube.classList;let curClass = classList[1];for (let i = 0; i < inputs.length; i++) {//讲师的方法// inputs[i].addEventListener('click', clickFn);//使用自定义属性inputs[i].addEventListener('click', clickFnn);}function clickFn(e) {let targetClass = e.target.className;// let targetClass = this.dataset.className;if (targetClass != curClass) {classList.replace(curClass, targetClass);curClass = targetClass;}}function clickFnn(e) {let curx = parseInt(this.dataset.rotatex),cury = parseInt(this.dataset.rotatey),curz = parseInt(this.dataset.rotatez);cube.style.transform = 'translateZ(-150px) rotateX(' + (curx) + 'deg) rotateY(' + (cury) + 'deg) rotateZ(' + (curz) + 'deg)';}})()</script></html>
