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
Vue implements the operation code of clicking a button to download a file (backend Java)
In the previous article, I introduced the functio...
Detailed explanation of the cache implementation principle of Vue computed
Table of contents Initialize computed Dependency ...
How to modify the firewall on a Linux server to allow remote access to the port
1. Problem Description For security reasons, the ...
How to deploy hbase using docker
Standalone hbase, let’s talk about it first. Inst...
How to elegantly implement the mobile login and registration module in vue3
Table of contents Preface Input box component lay...
Element uses scripts to automatically build new components
Table of contents background How does element-ui&...
Summary of the use of Vue computed properties and listeners
1. Computed properties and listeners 1.1 Computed...
Detailed Tutorial on Installing VirtualBox 6.0 on CentOS 8 / RHEL 8
VirtualBox is a free and open source virtualizati...
Installation, activation and configuration of ModSecurity under Apache
ModSecurity is a powerful packet filtering tool t...
How to transfer files between Windows and Linux
File transfer between Windows and Linux (1) Use W...
Detailed explanation of how Vue components transfer values to each other
Table of contents Overview 1. Parent component pa...
How to use Docker-compose to build an ELK cluster
All the orchestration files and configuration fil...
How to deal with time zone issues in Docker
background When I was using Docker these two days...
Use javascript to create dynamic QQ registration page
Table of contents 1. Introduction 1. Basic layout...
mysql-8.0.15-winx64 uses the zip package to install and the service is shut down immediately after starting
The MySQL version used in this example is mysql-8...