I made a spinning cube with HTML/CSS, and these triangles keep appearing above the cube, as shown below. Is there any way to fix this?
.wrapper {
width: 50%;
float: left;
}
.w1 {
perspective: 1000px;
}
.cube {
font-size: 4em;
width: 2em;
margin: 1.5em auto;
transform-style: preserve-3d;
transform: rotateX(-22.5deg) rotateY(45deg);
image-rendering: pixelated;
animation: spin infinite 5s;
animation-timing-function: linear;
}
.side {
position: absolute;
width: 2em;
height: 2em;
background: rgba(tomato, .6);
border: 1px solid rgba(0,0,0,.5);
text-align: center;
line-height: 2em;
}
.front { transform: translateZ(1em); }
.top { transform: rotateX( 90deg) translateZ(1em); }
.right { transform: rotateY( 90deg) translateZ(1em); }
.left { transform: rotateY(-90deg) translateZ(1em); }
.bottom { transform: rotateX(-90deg) translateZ(1em); }
.back { transform: rotateY(-180deg) translateZ(1em); }
@keyframes spin {
0% {transform: rotateX(-22.5deg) rotateY(45deg);}
100% {transform: rotateX(-22.5deg) rotateY(405deg);}
}
<body>
<div class="wrapper w1">
<div class="cube">
<div class="side front"><img src="https://cdn.glitch.com/2f5f53d3-f3c1-4dd2-a2ef-ae82302f3cd4%2Fplanks_oak.png?v=1609955268179" style="width: 100%; height: 100%;"></div>
<div class="side back"><img src="https://cdn.glitch.com/2f5f53d3-f3c1-4dd2-a2ef-ae82302f3cd4%2Fplanks_oak.png?v=1609955268179" style="width: 100%; height: 100%;"></div>
<div class="side right"><img src="https://cdn.glitch.com/2f5f53d3-f3c1-4dd2-a2ef-ae82302f3cd4%2Fplanks_oak.png?v=1609955268179" style="width: 100%; height: 100%;"></div>
<div class="side left"><img src="https://cdn.glitch.com/2f5f53d3-f3c1-4dd2-a2ef-ae82302f3cd4%2Fplanks_oak.png?v=1609955268179" style="width: 100%; height: 100%;"></div>
<div class="side top"><img src="https://cdn.glitch.com/2f5f53d3-f3c1-4dd2-a2ef-ae82302f3cd4%2Fplanks_oak.png?v=1609955268179" style="width: 100%; height: 100%;"></div>
<div class="side bottom"><img src="https://cdn.glitch.com/2f5f53d3-f3c1-4dd2-a2ef-ae82302f3cd4%2Fplanks_oak.png?v=1609955268179" style="width: 100%; height: 100%;"></div>
</div>
</div>
</body>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
