Через родной JS, щелчок события, нажатие мыши, подъем мыши и события движения мыши, реализация и вращение трехмерного куба
Принцип реализации: Получив координаты мыши при щелчке по экрану и координатам мыши при перемещении, мы можем получить расстояние от мыши, перемещающейся по оси x и оси y, и назначить расстояние к атрибуту преобразования в режиме реального времени.
Следовательно, эффект вращения трехмерного куба достигается путем изменения преобразования: повернуть значение атрибута.
HTML -кодовый блок:
<body> <input type = "button" value = "Щелкните, чтобы распространить"/> <input type = "text" value = "" /// x-ось угла поворота <input type = "text" value = "" /// y-ось угла поворота <ввод вход type = "text"/> <div> <div> <pan> </span> <pran> </span> <pran> </span> <pan> </span> <pan> </span> <pan> </span> </div> </body>
CSS -кодовый блок:
<style> body {coursor: url ("img/openhand1.png"), auto;}. big_box {width: 500px; высота: 500px; маржа: 200px auto;}. Box {-webkit-transform-syle: veserve-3d-style-style: preserve-3d; -sm-style: -mm-style:-ms-ms-trans-sty-style:-ms-ms-trans-style:-ms-mesmle-style-style:-mesmporm-st PRESERVE-3D; Стиль преобразования: PREEPREVE-3D; Transform-Origin: 100px 100px 00px; положение: относительно; преобразование: rowatex (0deg) rowatey (0deg) rotatez (0deg) Scale3d (0.7,0,0,7,0,7);}. Box Span: Transition: All 1s Lineer; 200px; высота: 200px; размеры размером с коробки: пограничная бокса; граница: 1px sold #999;/*непрозрачность: 0,7;*/text-align: center; line-height: 200px; шрифт-размер: 60px; font-weigh rotatey (-90deg) transtatex (-100px); // слева} .box span: nth-child (2) {фоновый цвет: красный; преобразование-аоригин: справа; трансформация: rowatey (90deg) transtatex (100px); // справа}. Ящик: nth-child (3) {foundal-color: green; green-oreag: nth-child (3) {founal-color: green; Translatey (-100px); // top} .box span: nth-child (4) {фоновый цвет: #6633ff; transform-Origin: внизу; преобразование: rotatex (-90deg) Translateey (100px); // внизу} .box span: nth-clild (5) {фоновый колледж; SPAN: NTH-CHILD (6) {FOONAL-COLUR: #122B40; TRASNACT: TRASTATEZ (100px); // Front} .box: Hover Span {opacity: 0.3;}. Box: Hover {Animation-Play-State: PAUSED; // SET PAUSE} </style>JS -кодовый блок:
<script> move (); clickbox (); // бесплатно, когда мышь нажимает и перемещается, функция move () {var body = document.queryselector ("body"); var box = document.queryselector (". box"); var xnum = document.queryselector (". xnum"); var ynum = queryselector ("ynum"); 0; var xx = 0, yy = 0; var xarr = [], yarr = []; window.onmousedown = function (e) {// body invate offem.style.cursor = 'url ("img/closdhand1.png"), auto'; xarr [0] = e.clientx/2;//Получить координаты «mase yary yraring yrary yarry yrary yrarce yrarce yrarce yrarce yrarce yrars». e.clienty/2; window.onmouseMove = function (e) {// Перемещение мыши event----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- = xx+"°";// Assign the obtained distance число для ввода, чтобы отобразить угол поворота ynum.value = yy+"°"; // Записать угол поворота в Box.style.transform = "rotatex ("+xx+"deg) rotatey ("+yy+"deg) rotatez (0deg) Scale3d3d (0.7,0,7,0,7)"; xarr [0] = E.clientx/2; e.clientY/2;}};window.onmouseup = function () {//Mouselift event---used to clear the mouse movement event, body.style.cursor = 'url("img/openhand1.png"),auto';window.onmousemove = null;}}//Click event, responsible for the six-sided stretching of the cube box function clickBox(){var btn = document.queryselector (". Open"); var box = document.queryselector (". box"); var son = box.children; var value = 0; // хранение параметров преобразования, когда куб рассеивается var arr0 = ["rotatey (-90deg) translatex (-100px)", "rotatey (90deg) Translatex (100px) "," rotatex (90deg) translatey (-100px) ", <br>" rotatex (-90deg) Transtey (100px) "," Transtatez (-100px) "," Transtatez (100px) "// Хранить параметры Var1 = [" roTATEY (-90DEG) "// Translatex (-100px) Transtatez (100px) "," rotatey (90deg) transtatex (100px) transtatez (100px) ", <br>" rotatex (90deg) Transeg (-100px) Transtatez (100px) "," Rotatex (-90DEG) Translatey (100px) transtatez (100px) "," translatez (-200px) "," transtatez (200px) "]; btn.onclick = function () {if (value == 0) {value = 1; btn.value =" click to Merge "; для (var i = 0; i <arrm.length; arr1 [i]; console.log (son [i])}} else if (value == 1) {value = 0; btn.value = "Нажмите на распространение"; for (var j = 0; j <arr0.length; j ++) {son [j] .style.transform = arr0 [j]; console.log (j);Выше приведено соответствующие знания, представленные вам о вращении трехмерного куба, на основе нового преобразования атрибутов и нативного JS CSS3. Я надеюсь, что это будет полезно для всех. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит всем вовремя. Большое спасибо за вашу поддержку сайту wulin.com!