Of Stack

Mouse dragging 3d cube rotation based on css3 new attribute transform and native js

  • 2021-06-28 10:11:20
  • OfStack

With native JS, click events, mouse press, mouse lift, and mouse move events, the 3d cube is dragged and rotated, and the rotation angle is reflected on the interface in real time.

Implementation principle: Get the coordinates of mouse clicking on the screen and mouse moving to get the distance of the mouse moving on the X axis and Y axis, and assign the distance to the transform attribute in real time

Thus, the effect of 3d cube rotation can be achieved by changing the value of transform:rotate attribute.

HTML code block: 


<body>
<input type="button" class="open" value=" Click to spread "/>
<input type="text" class="xNum" value=""/>//X Axis rotation angle 
<input type="text" class="yNum" value=""/>//Y Axis rotation angle 
<input type="text" class="zNum"/>
<div class="big_box">
<div class="box">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</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) ;// upper 
}
.box span:nth-child(4){
background-color: #6633FF;
transform-origin: bottom;
transform: rotatex(-90deg) translatey(100px);// lower 
}
.box span:nth-child(5){
background-color: gold;
transform: translatez(-100px);// after 
}
.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();
// Triggered 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) {// MouseDown 
body.style.cursor = 'url("img/closedhand1.png"),auto';
xArr[0] = e.clientX/2;// Get coordinates when the mouse clicks on the screen 
yArr[0] = e.clientY/2;
window.onmousemove = function (e) {// Mouse Move Event - Triggered when the mouse is pressed and moved 
xArr[1] = e.clientX/2;// Get the first mouse movement 1 Coordinates of points 
yArr[1] = e.clientY/2;
yy += xArr[1] - xArr[0];// Get the distance the mouse moves 
xx += yArr[1] - yArr[0];
xNum.value = xx+" ° ";// Assign the resulting distance number to input Display rotation angle 
yNum.value = yy+" ° ";
// Write rotation angle transform in 
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 () {// The mouse-up event -- used to clear the mouse movement event, 
body.style.cursor = 'url("img/openhand1.png"),auto';
window.onmousemove = null;
}
}
// Click Events, Responsible for Cube Box 6 Face stretch 
function clickBox(){
var btn = document.querySelector(".open");
var box = document.querySelector(".box");
var son = box.children;
var value = 0;
// Storage Cube When Dispersed transform parameter 
var arr0 = ["rotatey(-90deg) translatex(-100px)","rotatey(90deg) translatex(100px)","rotatex(90deg) translatey(-100px)",<br>"rotatex(-90deg) translatey(100px)","translatez(-100px)","translatez(100px)"];
// Storage cube merge transform parameter 
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 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>
Related articles: