# Making a rotating pyramid

Time：2020-7-31

Making rotation pyramid animation, using CSS animation, the results are as follows
Here’s the code
Create a pyramid of the required layers, a total of four sides

``````<div class="triangle">
<div class="box">
<div  class="surface1">

</div>
<div class="surface2">

</div>
<div class="surface3">

</div>
<div  class="surf``ace4">

</div>
</div>
</div>``````

Position the pyramid and the size of the whole pyramid (this doesn’t matter)

``````.triangle {
width: 20%;
height: 50%;
position: absolute;
left: 30%;
top: 30%;
}``````

Size each side of the pyramid

`````` .box div {
width: 100%;
height: 80%;
position: absolute;
}``````

Then set the background image for each side. The pictures and styles are as follows

``````.box div {
width: 100%;
height: 80%;~~~~
position: absolute;
background: url('image/triangle.png') no-repeat;
background-size: 100% 100%;
}``````

Now the effect is as follows

Then add 3D rotation animation to the box

``````.box {
/*Set up 3D effects*/
transform-style: preserve-3d;
/*The size of the box*/
width: 100%;
height: 100%;
margin: 0px auto;

animation: rotate 5s ease;
/*Unlimited execution*/
animation-iteration-count: infinite;
animation-timing-function: linear;
}

/*Add 3D rotation effect Y-axis rotation*/
@keyframes rotate {
from {
transform: rotateX(-20deg) rotateY(0deg);
}
to {
transform: rotateX(-20deg) rotateY(360deg);
}
}``````

The results achieved are as follows

The last step, adjusting the angle of each side, is done

``````/*Adjust the position and make a pyramid*/

.box .surface1 {
transform: rotateX(31deg) translateZ(90px);
}

.box .surface2 {
transform: rotateX(-31deg) translateZ(-90px) rotateY(180deg);
}

.box .surface3 {
transform: rotateZ(31deg) rotateY(-90deg) translateZ(90px);
}

.box .surface4 {
transform: rotateZ(-31deg) rotateY(90deg) translateZ(90px);
}``````

`

## PHP uses redis to solve the problem of oversold

preface In the event of the second killing of goods, for example, the inventory of goods is only 100, but in the rush purchase activity, 200 people may rush to buy at the same time, so there is concurrency. If the order of 100 goods is completed and the inventory is 0, it may continue […]