纯css+html实现立体三角锥效果(还不是很完善,欢迎指正修改~)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title><script src="https://l2dwidget.js.org/lib/L2Dwidget.min.js"></script>
</head>
<style>
.box {
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
margin: 300px auto;
position: relative;
transform-style: preserve-3d;
transform: rotateX(80deg) rotateY(360deg) rotateZ(360deg);
animation: rotate 10s linear infinite;
}
.box1,
.box2,
.box3,
.box4,
.box5 {
width: 0;
height: 0;
font-size: 50px;
position: absolute;
opacity: 0.2;
border: 1px solid #0698d1;
}
.box1 {
width: 200px;
height: 200px;
background-color: #026fb1;
}
.box2 {
left: -200px;
top: 0;
border-top: 100px solid transparent;
border-right: 200px solid #026fb1;
border-bottom: 100px solid transparent;
/* border-left: 0px; */
transform-origin: right;
transform: rotateY(-120deg);
}
.box3 {
border-top: 100px solid transparent;
border-left: 200px solid #026fb1;
border-bottom: 100px solid transparent;
left: 200px;
top: 0;
transform-origin: left;
transform: rotateY(120deg);
}
.box4 {
border-left: 100px solid transparent;
border-bottom: 200px solid #026fb1;
border-right: 100px solid transparent;
left: 0;
bottom: 200px;
transform-origin: bottom;
transform: rotateX(120deg);
}
.box5 {
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 200px solid #026fb1;
left: 0;
top: 200px;
transform-origin: top;
transform: rotateX(-120deg);
}
@keyframes rotate {
from {
transform: rotateX(80deg) rotateY(360deg) rotateZ(360deg);
}
to {
transform: rotateX(80deg) rotateY(360deg) rotateZ(0deg);
}
}
</style>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</div>
</body>
</html>
实现效果(如图):