CSS3 3D Rubik’s Cube mouse control cool effect

“This is the 10th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

The previous article has made crystal rubik’s cube, this time we upgrade its function, through the mouse control rubik’s cube rotation.

Let’s look at the effect first

What do you think of this awesome effect?

Mouse events

This effect, we need to use JS implementation. It is mainly to monitor mouse events, calculate the sliding distance of the mouse, and change the rotateX and rotateY of the Rubik’s cube

What mouse events does JS have?

1. Click: click event.

2, dblclick: double click event

3, onMouseDown: the event is triggered when the mouse is pressed down, whether holding down the left/right button or pulley can be

4. Onmousemove: Real-time event triggered by mouse movement

5. Onmouseup: Trigger an event when the mouse is released

6. Mousemove: Mouse movement event.

Mouseover: Move the event in.

Mouseout: Remove event.

9. Mouseenter: Move in event.

Mouseleave: Remove event.

Contextmenu: contextMenu event

What events do you need to listen for? Knowing their role, we know how to deal with it.

The current position of the mouse is recorded when the mouse is pressed down, and the real-time position can be obtained when the mouse is moved. The relative position of the mouse can be obtained by subtracting the real-time position obtained when the mouse is pressed down. Release the mouse, you can end the calculation.

Let’s look at the code implementation

The sample code

Jquery is used here, you can download and use it yourself

// Angle initialization
var RotateY = 0;
var RotateX = 0;

// Block onMousemove with a variable,
var flag = false;

// Start position
var old_x = 0;
var old_y = 0;
document.onmousedown = function (e) {
  flag = true;
  // When the mouse is pressed, record the starting position
  old_x = e.pageX;
  old_y = e.pageY;
}
document.onmousemove = function (e) {
  // It must be pressed and moved to work
  if (flag) {
    /** * New position minus old position * to get the X/Y distance of mouse movement */
    var _x = e.pageX - old_x;
    var _y = e.pageY - old_y;

    /** * divide by 70 to get the required rotation Angle ** The larger the divisor, the smaller the rotation Angle ** On the contrary, the divisor is 1, the mouse gently drag, will rotate very much */
    RotateY += _x / 70;
    RotateX += -(_y / 70);
    /** * Add transform to box for 3D rotation */
    $('.box').css({
      transition: 'linear'.transform: 'rotateX(' + RotateX + 'deg) rotateY(' + RotateY + 'deg)'}); }};document.onmouseup = function () {
  flag = false;
  // End when mouse is up
};
Copy the code

This allows the cube to rotate with the mouse, but as you can see in the example above, it has an expanded and folded effect. How does this work?

Learn more

Our rubik’s cube looked something like this

Now, draw two cubes, one smaller, so that the smaller cube is right in the center of the larger cube

<div class="content">
  <div class="box">
    <! Outer Rubik's Cube -->
    <div class="out-front">before</div>
    <div class="out-back">after</div>
    <div class="out-left">On the left</div>
    <div class="out-right">right</div>
    <div class="out-top">on</div>
    <div class="out-bottom">Under the</div>
    <! Inner Rubik's Cube -->
    <span class="in-front"></span>
    <span class="in-back"></span>
    <span class="in-left"></span>
    <span class="in-right"></span>
    <span class="in-top"></span>
    <span class="in-bottom"></span>
  </div>
</div>
Copy the code

Adjust as in the previous section. Make the small cube right in the center of the big cube.

The style is as follows:

.content {
  margin-top: 200px;
  perspective: 1000px;
  / * * / horizon
}
.box {
  width: 200px;
  height: 200px;
  position: relative;
  color: #fffdf5;
  font-size: 36px;
  font-weight: bold;
  text-align: center;
  line-height: 200px;
  transform-style: preserve-3d;
  /* Default 2D */
  transition: transform 1s;
  /*transform animation */
  /* Unselect text */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.box>div {
  width: 200px;
  height: 200px;
  border: 1px solid #FF2869;
  position: absolute;
  background-color: # 333;
  opacity: 0.5;
  transition: transform 0.4 s;
  /*transform animation */
}

.box .out-front {
  transform: translateZ(100px);
  background: url(./b1.jpg);
  background-size: cover;
}

.box .out-back {
  transform: translateZ(-100px) rotateY(180deg);
  background: url(./b2.jpg);
  background-size: cover;
}

.box .out-left {
  transform: translateX(-100px) rotateY(-90deg);
  background: url(./b3.jpg);
  background-size: cover;
}

.box .out-right {
  transform: translateX(100px) rotateY(90deg);
  background: url(./b4.jpg);
  background-size: cover;
}

.box .out-top {
  transform: translateY(-100px) rotateX(90deg);
  background: url(./b5.jpg);
  background-size: cover;
}

.box .out-bottom {
  transform: translateY(100px) rotateX(-90deg);
  background: url(./b6.jpg);
  background-size: cover;
}

.box>span {
  display: block;
  width: 100px;
  height: 100px;
  border: 1px solid #FF2869;
  position: absolute;
  top: 50px;
  left: 50px;
}

.box .in-front {
  transform: translateZ(50px);
  background: url(./b1.jpg);
  background-size: cover;
}

.box .in-back {
  transform: translateZ(-50px) rotateY(180deg);
  background: url(./b2.jpg);
  background-size: cover;
}

.box .in-left {
  transform: translateX(-50px) rotateY(-90deg);
  background: url(./b3.jpg);
  background-size: cover;
}

.box .in-right {
  transform: translateX(50px) rotateY(90deg);
  background: url(./b4.jpg);
  background-size: cover;
}

.box .in-top {
  transform: translateY(-50px) rotateX(90deg);
  background: url(./b5.jpg);
  background-size: cover;
}

.box .in-bottom {
  transform: translateY(50px) rotateX(-90deg);
  background: url(./b6.jpg);
  background-size: cover;
}
Copy the code

Then we control the expansion and collapse effects through JS

var clickNum = 1;    // Number of clicks
$('.box').children().click(function () {
  // If the number of clicks is odd, expand, even, fold
  if (clickNum % 2= =0) {
    Pack up / /
    $('.out-front').css({ 
      transform: 'translateZ(100px)' 
    });
    $('.out-back').css({ 
      transform: 'translateZ(-100px) rotateY(180deg)'
    });
    $('.out-left').css({ 
      transform: 'translateX(-100px) rotateY(-90deg)'
    });
    $('.out-right').css({
      transform: 'translateX(100px) rotateY(90deg)'
    });
    $('.out-top').css({
      transform: 'translateY(-100px) rotateX(90deg)'
    });
    $('.out-bottom').css({
      transform: 'translateY(100px) rotateX(-90deg)'
    });
  } else {
    / /
    $('.out-front').css({ 
      transform: 'translateZ(200px)'
    });
    $('.out-back').css({ 
      transform: 'translateZ(-200px) rotateY(180deg)'
    });
    $('.out-left').css({ 
      transform: 'translateX(-200px) rotateY(-90deg)'
    });
    $('.out-right').css({ 
      transform: 'translateX(200px) rotateY(90deg)'
    });
    $('.out-top').css({ 
      transform: 'translateY(-200px) rotateX(90deg)'
    });
    $('.out-bottom').css({ 
      transform: 'translateY(200px) rotateX(-90deg)'
    });
  }
  clickNum++;
});

// Add mouse gesture styles to all child elements of box
$('.box').children().mouseenter(function () {$(this).css({ cursor: 'pointer' });
});
Copy the code

OK, so our CSS3 3D Rubik’s Cube mouse control cool effect will be achieved.

conclusion

What did you learn? JS mouse events are understood? CSS3 3D scene all learned?

Follow me and learn more about the front end, but not just the front end!

If you have any questions, please leave them in the comments section. Need source partners can buy, private letter I oh.

Thank you all for your continued support.