Comment: I read an article about how to use css3 to create 3d tetrahedrons. I thought it was quite good, so I took it out and shared with you how to use div+css to create triangles. Here I will first paste the relevant code, and then explain the principle to you
Today I read an article about how to use css3 to create 3d tetrahedrons. I thought it was quite good, so I took it out and shared it with you.The first thing I want to share with you is how to use div+css to create triangles. Here I will first paste the relevant code and then explain the principles to you.
html:
<div>
<div></div>
</div>
css:
<style type="text/css">
#pyramid {
position: relative;
margin: 100px auto;
height: 500px;
width: 100px;
}
#pyramid > div {
position: absolute;
border-style: solid;
border-width: 200px 0 200px 346px;
}
#pyramid > div:after {
position: absolute;
content: "Triangle";
color: #ffff;
left: -250px;
text-align: center;
}
#pyramid > div:first-child {
border-color: #ff0000 transparent #ff0000 rgba(50, 50, 50, 0.6);
}
</style>
Running effect:
Principle analysis:
In the html code, we define two divs, the outer div is a container object, and the inner div is used to generate triangles. In the css code, we do not set the width and height for the internal div, but only set the width of the three edges of the border (upper, down and left). By setting different colors for the three sides, they will become three different triangles respectively.
At this time, we just need to simply set the colors on the upper and lower sides to transparent colors, and an equilateral triangle will appear.
#pyramid > div:first-child {
border-color: transparent transparent transparent rgba(50, 50, 50, 0.6);
}
Reproduction image:
Among them, the place shown in the red circle is where the internal div is located. He is an invisible object with 0 width and 0 height, but actually exists.
What we will talk about next is how to implement 3d tetrahedrons and how to create animations.
First, paste the relevant code.
html:
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
css:
<style type="text/css">
#pyramid {
position: relative;
margin: 100px auto;
height: 500px;
width: 100px;
-webkit-transform-style: preserve-3d;
-webkit-animation: spin 10s linear infinite;
-webkit-transform-origin: 116px 200px 116px;
-moz-transform-style: preserve-3d;
-moz-animation: spin 10s linear infinite;
-moz-transform-origin: 116px 200px 116px;
-ms-transform-style: preserve-3d;
-ms-animation: spin 10s linear infinite;
-ms-transform-origin: 116px 200px 116px;
transform-style: preserve-3d;
animation: spin 10s linear infinite;
transform-origin: 116px 200px 116px;
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
to {
-webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
@-moz-keyframes spin {
from {
-moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
to {
-moz-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
@-ms-keyframes spin {
from {
-ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
to {
-ms-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
@keyframes spin {
from {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
#pyramid > div {
position: absolute;
border-style: solid;
border-width: 200px 0 200px 346px;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
}
#pyramid > div:after {
position: absolute;
content: "Triangle";
color: #ffff;
left: -250px;
text-align: center;
}
#pyramid > div:first-child {
border-color: transparent transparent transparent rgba(50, 50, 50, 0.6);
-webkit-transform: rotateY(-19.5deg) rotateX(180deg) translateY(-400px);
-moz-transform: rotateY(-19.5deg) rotateX(180deg) translateY(-400px);
-ms-transform: rotateY(-19.5deg) rotateX(180deg) translateY(-400px);
transform: rotateY(-19.5deg) rotateX(180deg) translateY(-400px);
}
#pyramid > div:nth-child(2) {
border-color: transparent transparent transparent rgba(50, 50, 50, 0.6);
-webkit-transform: rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-400px);
-moz-transform: rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-400px);
-ms-transform: rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-400px);
transform: rotateY(90deg) rotateZ(60deg) rotateX(180deg) translateY(-400px);
}
#pyramid > div:nth-child(3) {
border-color: transparent transparent transparent rgba(50, 50, 50, 0.9);
-webkit-transform: rotateX(60deg) rotateY(19.5deg);
-moz-transform: rotateX(60deg) rotateY(19.5deg);
-ms-transform: rotateX(60deg) rotateY(19.5deg);
transform: rotateX(60deg) rotateY(19.5deg);
}
#pyramid > div:nth-child(4) {
border-color: transparent transparent transparent rgba(50, 50, 50, 0.8);
-webkit-transform: rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px) translateZ(326px);
-moz-transform: rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px) translateZ(326px);
-ms-transform: rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px) translateZ(326px);
transform: rotateX(-60deg) rotateY(19.5deg) translateX(-116px) translateY(-200px) translateZ(326px);
}
</style>
Now start explaining the relevant code.
The html code is similar to the previous one, which is that there are three additional divs, which are used as the other three sides of the tetrahedron.
In the css code, we use #pyramid > div:nth-child(n) to find the four faces of the trihedron, set the colors of the four sides of the border, and define them into triangles respectively. Set their angle, orientation and position in 3D space through the transform attribute's rotateX, rotateY, translateX, translateY and translateZ methods. This involves a lot of mathematical knowledge, and everyone needs to supplement relevant knowledge.
Through the above arrangement, the tetrahedron is formed. Next is to add animation effects to it. The things used here are also very simple, namely animation and keyframes. You can learn the properties related to css3 at the site, so I won’t explain too much here.
At this point in this article, you can paste the html and css code together to see the final effect.
There is something in the code that you don’t understand, so you can leave me a message.