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, I would like to share with you how to use p + css to create triangles. Here, I first paste the relevant code and then explain the principles for you.
Html:
The Code is as follows:
Css:
The Code is as follows:
Running Effect:
Principle Analysis:
In the html code, we define two p S. The external p is the container object, and the internal p is used to generate a triangle. In css code, we didn't set the width and height for the internal p, 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> p: first-child {
Border-color: transparent rgba (50, 50, 50, 0.6 );
}
:
The red circle shows the position of the internal p. 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:
Css:
The Code is as follows:
Now, let's explain the relevant code.
The html code is similar to the previous one, that is, three more p S are used as the other three sides of the triangle respectively.
In css code, we use # pyramid> p: 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.
