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 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. 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
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
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
Recommend
Solution to high CPU usage of Tomcat process
Table of contents Case Context switching overhead...
Vue virtual Dom to real Dom conversion
There is another tree structure Javascript object...
Sharing of the fast recovery solution for Mysql large SQL files
Preface In the process of using MySQL database, i...
Master-slave synchronization configuration and read-write separation of MySQL database
The benefits of using MySQL master-slave replicat...
Implementation steps for docker-compose to deploy etcd cluster
Table of contents Write docker-compose.yml Run do...
How to use worm replication in Mysql data table
To put it simply, MySQL worm replication is to co...
Ajax jquery realizes the refresh effect of a div on the page
The original code is this: <div class='con...
JavaScript method to delete or extract specified characters from a string (very commonly used)
Table of contents 1. substring() 2. substr() 3.in...
Several implementation methods of the tab bar (recommended)
Tabs: Category + Description Tag bar: Category =&...
Bootstrap+Jquery to achieve calendar effect
This article shares the specific code of Bootstra...
Designing the experience: What’s on the button
<br />Recently, UCDChina wrote a series of a...
Example implementation of checking whether an object is empty in native javascript
Table of contents What is native JavaScript A. Ch...
Example of automatic import method of vue3.0 common components
1. Prerequisites We use the require.context metho...
Vue implements the right slide-out layer animation
This article example shares the specific code of ...
The top fixed div can be set to a semi-transparent effect
Copy code The code is as follows: <!DOCTYPE ht...