css写一个立方体 |css span 加边框

<div class="box">
<div class="top"></div>
<div class="front"></div>
<div class="right"></div>
<div class="back"></div>
<div class="left"></div>
<div class="bottom"></div>
</div>

在这个HTML结构中，大家先创建了一个类为“box”的div元素，它是整个立方体的容器。然后大家在这个容器中创建了六个div元素，分别用类名“top”、“front”、“right”、“back”、“left”和“bottom”进行标识。这六个div元素分别代表立方体的顶部、前部、右侧、后部、左侧和底部面板。

接着，大家需要使用CSS来给这些HTML元素设置样式。大家通过CSS中的“transform”属性来让立方体呈现3D效果。

.box{
width: 200px;
height: 200px;
position: relative;
transition: all 0.5s ease;
}
.top, .front, .right, .back, .left, .bottom{
position: absolute;
width: 200px;
height: 200px;
background-color: #1abc9c;
}
.top{
transform: rotateX(90deg);
transform-origin: top;
}
.front{
transform: translateZ(100px);
}
.right{
transform: rotateY(90deg) translateZ(100px);
transform-origin: right;
}
.back{
transform: translateZ(-100px) rotateX(180deg);
}
.left{
transform: rotateY(-90deg) translateZ(100px);
transform-origin: left;
}
.bottom{
transform: rotateX(-90deg) translateZ(-200px);
transform-origin: bottom;
}

在CSS中，大家首先为类为“box”的div元素设置了宽度和高度，并将它的“position”属性设置为“relative”，用于后续的绝对定位。接着大家为立方体面板的共同特征——宽度、高度和背景颜色——进行设置。之后大家分别对立方体的顶部、前部、右侧、后部、左侧和底部元素进行不同的3D变换，从而组合出完整的立方体效果。

通过上述HTML和CSS的设置，大家就可以在网页中呈现出一个非常棒的立方体了。这样一来，大家的网页将更加使人眼前一亮，吸引网站访问者的视线，提高网站的美观程度和设计价值。