HTML5 practice-how to use CSS to create triangles and use css3 to create 3D triangles

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 it with you. Original article address: http://www.paulrhayes.com/2010-10/css-tetrahedron /.

Demo preview address: http://www.paulrhayes.com/experiments/pyramid /.

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:

<div id="pyramid">    <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: #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.

#pyramid > div:first-child  {    border-color: transparent transparent 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:

<div id="pyramid">    <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: #fff;        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, 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.