Example code for implementing 3D Rubik's Cube with CSS

Let's make a simple 3D Rubik's Cube today

Let’s take a look at the renderings first! After learning this, you will be able to use some 3D photo albums on the Internet

1. Let's prepare our HTML code first

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>3d Rubik's Cube</title>
        <meta charset="UTF-8">
    </head>
    <body>
    	<div class="top"></div> <!--Top-->
    	<div class="bottom"></div> <!--Next-->
    	<div class="left"></div> <!--Left-->
    	<div class="right"></div> <!--Right-->
    	<div class="after"></div> <!--After-->
    	<div class="before"></div> <!--Before-->
    </body>
</html>

Okay, our HTML code is ready. First of all, we need to have a 3D thinking and imagine what the Rubik's Cube looks like in our brain. Isn't it made up of six faces?

2. Add CSS styles

*{
    margin:0; /* Default style removes margin*/
    padding:0;
}
div{ /*div general style settings height and width*/
    width: 300px;
    height: 300px;
    opacity:0.5; /*transparency*/
}
.top{ /* Set the color by class name. The following are all set colors*/
    background-color:brown;				
}
.bottom{
    background-color:blueviolet;
}
.left{
    background-color:blanchedalmond;
}
.right{
    background-color:cadetblue;
}
.after{
    background-color:chocolate;
}
.before{
    background-color:cyan;
}

Well, at this point, the foundation has been laid, and we can start building the building.

This must be the effect you see注意我這里是縮小了, and you should have the same blocks as me, all next to each other, stacked like pillars. Now we have to start piecing them together like pieces of paper.

2. Make div overlap

div{							
    width: 300px;
    height: 300px;
    position: absolute; /*Add absolute positioning to the general style of div*/
}
body{ /*The following step is to center all divs on the screen*/
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

Now you see this effect. There are clearly six squares, but why is there only one? In fact, it’s not. It’s just that the other divs are behind this div, and the div in the front blocks our view so we can’t see it.

3. Open 3D space

body{
    transform-style: preserve-3d; /*Only this code is needed to enable 3D space*/
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

Putting the divs together

.top{
    background-color:brown;
    transform:rotateX(90deg) translateZ(150px); /*rotate first then offset*/
}
.bottom{
    background-color:blueviolet;
    transform:rotateX(-90deg) translateZ(150px);
}
.left{
    background-color:blanchedalmond;
    transform:rotateY(-90deg) translateZ(150px);
}
.right{
    background-color:cadetblue;
    transform:rotateY(90deg) translateZ(150px);
}
.after{
    background-color:chocolate;
    transform:rotateY(180deg) translateZ(150px);
}
.before{
    background-color:cyan;
    transform:rotateY(0deg) translateZ(150px);
}

What you see should still look like this. In fact, we have completed the assembly of the Rubik's Cube, but the Rubik's Cube is lying flat and we can't see it, so just make an animation to rotate it.你給div加上一點文字更容易觀察

4. Animation Rotation

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>3d Rubik's Cube</title>
        <meta charset="UTF-8">
        <style type="text/css">
*{
    margin:0;           
    /* Default style removes margins*/
    padding:0;
}
div{
    width: 300px;
    height: 300px;
    position: absolute;
    opacity: 0.5;
    text-align: center;
    line-height: 300px;
}
body{
    transform-style: preserve-3d;
    height: 100vh;
    animation: fram1 10s ease; /*reference animation*/
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.top{
    background-color:brown;
    transform:rotateX(90deg) translateZ(150px);

}
.bottom{
    background-color:blueviolet;
    transform:rotateX(-90deg) translateZ(150px);
}
.left{
    background-color:blanchedalmond;
    transform:rotateY(-90deg) translateZ(150px);
}
.right{
    background-color:cadetblue;
    transform:rotateY(90deg) translateZ(150px);

}
.after{
    background-color:chocolate;
    transform:rotateY(180deg) translateZ(150px);
}
.before{
    background-color:cyan;
    transform:rotateY(0deg) translateZ(150px);
}
@keyframes fram1{ /* animation rotation X axis and Y axis */
    0%,100%{
        transform: rotateY(0deg) rotateX(0deg);
    }
    50%{
        transform: rotateY(180deg) rotateX(180deg);

    }
}
        </style>
    </head>
    <body> <!--Add text to make the visual clearer-->
    	<div class="top">1</div> 			
    	<div class="bottom">2</div>		
    	<div class="left">3</div>		
    	<div class="right">4</div>		
    	<div class="after">5</div>		
    	<div class="before">6</div>		
    </body>
</html>

All the code is here. I have finished it with you. If you want to make a 3D photo album, just add a background image to the div and background-color替換為background-image

V. Conclusion

Let's talk about the details! Of course, this is also the most important thing, I hope you see it. You have only seen the code in the splicing process. First, we made six divs with width:300px與height:300px . We overlapped them through position:absolute . You just need to remember that absolute positioning will make the layers overlap. z-inde: can control its layer. Now we come to the most important part, transform:rotateX(90deg) translateZ(150px); Why do I rotate first and then offset here?

In a nutshell, the location you arrive at when you turn right and move forward is different from the location you arrive at when you move forward and then turn right. This is the principle. If you understand it, even if you are just getting started, there are still many fun things to do in 3D. Waiting for you to explore slowly.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: How to load Flash in HTML (2 implementation methods)

>>: Summary of scientific principles and suggestions for web design and production