Make writing a habit together! This is the fourth day of my participation in the “Gold Digging Day New Plan · April More text Challenge”. Click here for more details.

To implement a rotating cube, just use the basic properties of CSS. Let’s take a look

1: Transform basic attributes

Transform implements 2D or 3D transformations of elements, and can rotate, scale, move, tilt, and so on.

The basic attributes are:

1. Move can set the entire setting property (translate), or you can set a direction conversion individually
  • translate(x.y) 2 d transformation
  • translate3d(x.y.z) define the 3D transformation
  • translateX(xX-axis conversion
  • translateY(yY-axis conversion
  • translateZ(zZ-axis conversion
2. Zoom can be set to the entire setting property (scale), you can also set the zoom in one direction individually
  • scale(x[,y]? 2D zoom conversion
  • scale3d(x.y.z) 3D zoom conversion
  • scaleX(x) sets the value of the X axis to define the scale transformation
  • scaleY(ySet the Y-axis value to define the scale transformation
  • scaleZ(z) sets the z-axis value to define the 3D zoom transformation
3. Rotation can be set to the entire Settings property (rotate), or you can individually set the rotation in a certain direction
  • rotate(angle) 2 d rotation
  • rotate3d(x.y.z.angleThe 3 d rotation)
  • rotateX(angle) 3D rotation along the X-axis
  • rotateY(angle) 3D rotation along the Y-axis
  • rotateZ(angle) 3D rotation along the Z axis
4. Tilt can be set to the entire setting property (skew), you can also set the tilt in a certain direction individually
  • skew(x-angle.y-angle) 2D tilt conversion along the X and Y axes
  • skewX(angle) 2D tilt conversion along the X axis
  • skewY(angle) 2D tilt conversion along the Y-axis
5. Set the 3D perspective
  • perspective(nDefines perspective views for 3D transformation elements

Two: the rotating cube

Requirement analysis: draw 6 faces, rotate the faces, move them to form a cube, add animation effect and make them rotate.

  1. Draw the six faces of the cube
<div class="cube">
    <main>
        <div class="front"></div>
        <div class="back"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="top"></div>
        <div class="bottom"></div>
    </main>
</div>
Copy the code
.cube div{
    width: 300px;
    height: 300px;
    position: absolute;
}
.front {
    background: rgba(100.0.100.0.6);
}

.back {
    background: rgba(0.100.100.0.5);
}
.left {
    background: rgba(100.1000.100.0.5);
}
.right {
    background: rgba(1000.100.100.0.5);
}
.top {
    background: rgba(1000.0.0.0.5);
}
.bottom {
    background: rgba(0.0.1000.0.5);
}
Copy the code

As shown in the figure, all faces are stacked on top of each other, and the transform property needs to be set to change the position of each face to achieve the 3D cube effect.

2. Zooming the six faces requires the outer div to move 150px negatively on the Z axis

transform: translateZ(-150px)
Copy the code

Also set the 3D effect. So the front doesn’t get covered by the back

transform-style: preserve-3d;
Copy the code

Set the front face and move the Z axis 150px forward

transform: translateZ(150px);
Copy the code

Set the back and move the Z axis 150px negatively

transform: translateZ(150px);
Copy the code

Set the left side, move it 150px in a negative direction, then rotate it 90° in the x direction

transform: translateY(-150px) rotateX(90deg);
Copy the code

Set the right, move the y axis 150px forward, and then rotate the X axis 90°

transform: translateY(150px) rotateX(90deg);
Copy the code

Set it to 150px in a negative direction and 90° in a negative direction

transform: translateX(-150px) rotateY(90deg);
Copy the code

Under the Settings, move the x axis 150px forward and then rotate the y axis 90°

transform: translateX(150px) rotateY(90deg);
Copy the code

3. Cube with animation

main {
    animation: rotate 3s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotateX(0) rotateY(0);
    }
     to {
        transform: rotateX(360deg) rotateY(360deg); }}Copy the code

Three: the whole code of the rotating cube

.cube {
    width: 300px;
    height: 300px;
    perspective: 900px;
}
main {
    width: 100%;
    height: 100%;
    transform: translateZ(-150px);
    transform-style: preserve-3d;
    animation: rotate 3s linear infinite;
}
@keyframes rotate {
    from {
        transform: rotateX(0) rotateY(0);
    }
    to {
        transform: rotateX(360deg) rotateY(360deg); }}.cube div{
    width: 100%;
    height: 100%;
    position: absolute;
}
.front {
    background: rgba(100.0.100.0.6);
    transform: translateZ(150px);
}

.back {
    background: rgba(0.100.100.0.5);
    transform: translateZ(-150px);
}
.left {
    background: rgba(100.1000.100.0.5);
    transform: rotateY(90deg) translateZ(150px); }.right {
    background: rgba(1000.100.100.0.5);
    transform: rotateY(90deg) translateZ(-150px);
}
.top {
    background: rgba(1000.0.0.0.5);
    transform: rotateX(90deg) translateZ(-150px);
}
.bottom {
    background: rgba(0.0.1000.0.5);
    transform: rotateX(90deg) translateZ(150px);
}
Copy the code

Doesn’t the code look simple? Just use the basic transform properties of CSS. You can also set a background picture for each face, so you can dazzle a, coupled with the snow effect in front of it, it is even cooler, quickly start to try it