Through native JS, click events, mouse press, mouse lift and mouse movement events, the drag and rotation of the 3d cube is realized, and the rotation angle is reflected in real time to display on the interface.
Implementation principle: By obtaining the coordinates of the mouse when clicking on the screen and the coordinates of the mouse when moving, we can obtain the distance of the mouse moving on the X-axis and Y-axis, and assign the distance to the transform attribute in real time.
Therefore, the effect of 3D cube rotation is achieved by changing the transform:rotate attribute value.
HTML code block:
<body><input type="button" value="click to spread"/><input type="text" value=""///X-axis rotation angle<input type="text" value=""///Y-axis rotation angle<input type="text"/><div><div><span></span><span></span><span></span><span></span><span></span><span></span></div></body>
CSS code block:
<style>body{cursor: url("img/openhand1.png"),auto;}.big_box{width: 500px;height: 500px;margin: 200px auto;}.box{-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;-ms-transform-style: preserve-3d;transform-style: preserve-3d;transform-origin:100px 100px 00px;position: relative;transform: rotatex(0deg) rotatey(0deg) rotatez(0deg)scale3d(0.7,0.7,0.7);}.box span{transition: all 1s linear;}span{display: block;position: absolute;width: 200px;height: 200px;box-sizing: border-box;border:1px solid #999;/*opacity: 0.7;*/text-align: center;line-height: 200px;font-size: 60px;font-weight: 700;border-radius: 12%;}.box span:nth-child(1){background-color: deepskyblue;transform-origin: left;transform: rotatey(-90deg) translatex(-100px);//left}.box span:nth-child(2){background-color: red;transform-origin: right;transform: rotatey(90deg) translatex(100px) ;//right}.box span:nth-child(3){background-color: green;transform-origin: top;transform: rotatex(90deg) translatey(-100px) ;//top}.box span:nth-child(4){background-color: #6633FF;transform-origin: bottom;transform: rotatex(-90deg) translatey(100px);//bottom}.box span:nth-child(5){background-color: gold;transform: translatez(-100px);//back}.box span:nth-child(6){background-color: #122b40;transform: translatez(100px);//front}.box:hover span{opacity: 0.3;}.box:hover{animation-play-state:paused;//Set animation pause}</style>JS code block:
<script>move();clickBox();//Free when the mouse is pressed and moved, function move(){var body = document.querySelector("body");var box = document.querySelector(".box");var xNum =document.querySelector(".xNum");var yNum =document.querySelector(".yNum");var x = 0,y = 0,z = 0;var xx = 0,yy = 0;var xArr = [],yArr = [];window.onmousedown = function (e) {//Mouse press event body.style.cursor = 'url("img/closedhand1.png"),auto';xArr[0] = e.clientX/2;//Get the coordinates of the mouse when clicking on the screen yArr[0] = e.clientY/2;window.onmousemove = function (e) {//Mouse moving event----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- = xx+"°";// Assign the obtained distance number to input to display the rotation angle yNum.value = yy+"°";//Write the rotation angle into transform box.style.transform = "rotatex("+xx+"deg) rotatey("+yy+"deg) rotatez(0deg)scale3d(0.7,0.7,0.7)";xArr[0] = e.clientX/2;yArr[0] = 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;//Storing transform parameters when the cube is dispersed var arr0 = ["rotatey(-90deg) translatex(-100px)","rotatey(90deg) translatex(100px)","rotatex(90deg) translatey(-100px)",<br>"rotatex(-90deg) translatey(100px)","translatez(-100px)","translatez(100px)"];//Storing transform parameters var arr1 = ["rotatey(-90deg) translatex(-100px)translatez(100px)","rotatey(90deg) translatex(100px)translatez(100px)",<br>"rotatex(90deg) translatey(-100px)translatez(100px)","rotatex(-90deg) translatey(100px)translatez(100px)","translatez(-200px)","translatez(200px)"];btn.onclick = function(){if(value == 0){value = 1;btn.value = "click to merge";for(var i=0;i<arr1.length;i++){son[i].style.transform = arr1[i];console.log(son[i])}}else if(value == 1){value = 0;btn.value = "click to spread";for(var j=0;j<arr0.length;j++){son[j].style.transform = arr0[j];console.log(j);}}};}</script>The above is the relevant knowledge introduced to you about the mouse dragging 3D cube rotation based on the new attribute transform and native js of CSS3. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!