<div class="box">
<div class="pyramid py-1">
<div class="pyramid__inner">
<div class="bit bit-1"><span>1</span></div>
<div class="bit bit-2"><span>2</span></div>
<div class="bit bit-3"><span>3</span></div>
<div class="bit bit-4"><span>4</span></div>
</div>
</div>
</div>
.box {
position: relative;
// width: 500px;
// height: 500px;
margin: 0 auto;
}
/* ------------ 0 ------------ */
.pyramid {
width: 200px;
height: 200px;
margin: 3em auto -2rem;
position: absolute;
left: 50%;
-webkit-perspective-origin: center -75%;
perspective-origin: center -75%;
}
.pyramid__inner {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateZ(-150px) translateX(-70%) rotateY(360deg);
transform: translateZ(-150px) translateX(-70%) rotateY(360deg);
-webkit-animation: Anim 15s linear infinite;
animation: Anim 15s linear infinite;
}
@-webkit-keyframes Anim {
0% {
-webkit-transform: translateZ(-150px) translateX(-75%) rotateY(0deg);
transform: translateZ(-150px) translateX(-75%) rotateY(0deg);
}
50% {
-webkit-transform: translateZ(-150px) translateX(75%) rotateY(180deg);
transform: translateZ(-150px) translateX(75%) rotateY(180deg);
}
100% {
-webkit-transform: translateZ(-150px) translateX(-75%) rotateY(360deg);
transform: translateZ(-150px) translateX(-75%) rotateY(360deg);
}
}
@keyframes Anim {
0% {
-webkit-transform: translateZ(-150px) translateX(-75%) rotateY(0deg);
transform: translateZ(-150px) translateX(-75%) rotateY(0deg);
}
50% {
-webkit-transform: translateZ(-150px) translateX(75%) rotateY(180deg);
transform: translateZ(-150px) translateX(75%) rotateY(180deg);
}
100% {
-webkit-transform: translateZ(-150px) translateX(-75%) rotateY(360deg);
transform: translateZ(-150px) translateX(-75%) rotateY(360deg);
}
}
.bit {
position: absolute;
height: 0;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
opacity: .92;
}
.py-1 {
-webkit-transform: scale(.485);
transform: scale(.485);
-webkit-perspective: 5000px;
perspective: 5000px;
z-index: 3;
top: 0;
}
/* ------------ 1 ------------ */
.py-1 .bit {
width: 0px;
}
.py-1 .bit-1 {
border-bottom: 200px solid #3765F9;
}
.py-1 .bit-2,
.py-1 .bit-3,
.py-1 .bit-4 {
border-bottom: 200px solid #3765F9;
}
.py-1 .bit-1 {
-webkit-transform: rotateX(30deg) translateZ(57px);
transform: rotateX(30deg) translateZ(57px);
}
.py-1 .bit-2 {
-webkit-transform: rotateX(-30deg) translateZ(-57px);
transform: rotateX(-30deg) translateZ(-57px);
}
.py-1 .bit-3 {
-webkit-transform: rotateZ(-30deg) rotateY(-90deg) translateZ(-57px);
transform: rotateZ(-30deg) rotateY(-90deg) translateZ(-57px);
}
.py-1 .bit-4 {
-webkit-transform: rotateZ(30deg) rotateY(90deg) translateZ(-57px);
transform: rotateZ(30deg) rotateY(90deg) translateZ(-57px);
}
/* Text style */
span {
display: block;
width: 100%;
text-align: center;
color: #fff;
font-weight: bold;
font-family: sans-serif;
font-size: 3rem;
-webkit-transform: rotateY(180deg) translateY(100%);
transform: rotateY(180deg) translateY(100%);
}
.bit-1 span {
-webkit-transform: rotateY(0deg) translateY(100%);
transform: rotateY(0deg) translateY(100%);
}
.py-1 span {
line-height: 5rem;
-webkit-transform: rotateY(180deg) translateY(100%) translateX(-2.5rem);
transform: rotateY(180deg) translateY(100%) translateX(-2.5rem);
}
.py-1 .bit-1 span {
-webkit-transform: rotateY(0deg) translateY(100%) translateX(-.5rem);
transform: rotateY(0deg) translateY(100%) translateX(-.5rem);
}
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/259ca0b0743f687aceed5f02f9c325fd.png)