Use css to create a triangle use CSS3 to create a 3d triangle principle and code (html5 Practice)

Comments: Today I read an article about how to use css3 to create a 3d triangle. I think it is quite good. So I will share with you how to use div + css to create a triangle. Here, I first paste the relevant code and then explain the principle to everyone. Today I read an article about how to create a 3d him/her using css3. I think it is quite good, so I will share it with you.
First, we should share with you how to create triangles using div + css. Here, I first paste the relevant code and then explain the principles for you.
Html:

The Code is as follows:
<Div id = "pyramid">
<Div> </div>
</Div>

Css:

The Code is as follows:
<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 pixel PX;
}
# Pyramid> div: after {
Position: absolute;
Content: "Triangle ";
Color: # fff;
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 external divs are container objects, and the internal divs are used to generate triangles. In css code, we didn't set the width and height for the internal div, but set the width of the three border sides (top, bottom, and left ). By setting different colors for the three sides, they will be changed to three different triangles respectively.
At this time, we only need to simply set the color of the upper and lower sides to transparent color, an equi-edge triangle will appear.

The Code is as follows:
# Pyramid> div: first-child {
Border-color: transparent rgba (50, 50, 50, 0.6 );
}

:
 
The red circle shows the position of the internal div. It is an invisible, 0-width, 0-height object, but actually exists.
Next, we will talk about how to implement 3d hexagons and how to create animations.
First, paste the relevant code.
Html:

The Code is as follows:
<Div id = "pyramid">
<Div> </div>
<Div> </div>
<Div> </div>
<Div> </div>
</Div>

Css:

The Code is as follows:
<Style type = "text/css">
# Pyramid {
Position: relative;
Margin: 100px auto;
Height: 500px;
Width: 100px;
-Webkit-transform-style: preserve-3d;
-Webkit-animation: spin 10 s linear infinite;
-Webkit-transform-origin: 116px 200px 116px;
-Moz-transform-style: preserve-3d;
-Moz-animation: spin 10 s linear infinite;
-Moz-transform-origin: 116px 200px 116px;
-Ms-transform-style: preserve-3d;
-Ms-animation: spin 10 s linear infinite;
-Ms-transform-origin: 116px 200px 116px;
Transform-style: preserve-3d;
Animation: spin 10 s 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 pixel PX;
-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: # fff;
Left:-250px;
Text-align: center;
}
# Pyramid> div: first-child {
Border-color: 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 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 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 rgba (50, 50, 50, 0.8 );
-Webkit-transform: rotateX (-60deg) rotateY (19.5deg) translateX (-pixel px) translateY (-200px) translateZ (326px );
-Moz-transform: rotateX (-60deg) rotateY (19.5deg) translateX (-pixel px) translateY (-200px) translateZ (326px );
-Ms-transform: rotateX (-60deg) rotateY (19.5deg) translateX (-pixel px) translateY (-200px) translateZ (326px );
Transform: rotateX (-60deg) rotateY (19.5deg) translateX (-pixel px) translateY (-200px) translateZ (326px );
}
</Style>

Now, let's explain the relevant code.
The html code is similar to the previous one, that is, three more divs are used as the other three sides of the triangle respectively.
In css code, we use # pyramid> div: nth-child (n) to find the four sides of the three sides, set the color of the four sides of the border, and define them as triangles. You can use the rotateX, rotateY, translateX, translateY, and translateZ methods of the transform attribute to set the angle, orientation, and position of the rotateX, rotateY, translateX, and translateZ attributes in a three-dimensional space. This involves a lot of mathematical knowledge, and you need to add relevant knowledge.

Through the above settings, the triangle is formed. The next step is to add an animation effect to it. The usage here is also very simple, that is, animation and keyframes. For more information about css3 attributes, visit http://www.w3schools.com/css3/default.asp.

So far, you can paste html and css Code together to view the final effect.
There is something you don't understand in the code. You can leave a message for me.