如何仅使用HTML和CSS创建多维数据集？

我有这个，我想用HTML和CSS制作一个立方体，就像上图一样。我最好的：

.mainDiv{
位置：相对位置；
宽度：206px；
高度：190px；
保证金：0px自动；
边缘顶部：100px；
}
.广场{
宽度：100px；
高度：100px；
背景：#c52329；
边框：实心2px#FFF；
浮动：左；
变换：倾斜（180度、210度）；
位置：绝对位置；
顶部：43px；
}
.2平方米{
宽度：100px；
高度：100px；
背景：#c52329；
边框：实心2px#FFF；
浮动：左；
变换：倾斜（180度、150度）；
位置：绝对位置；
左：102px；
顶部：43px；
}
.3{
宽度：100px；
高度：100px；
背景：#c52329；
边框：实心2px#FFF；
浮动：左；
变换：倾斜（180度，180度）；
位置：绝对位置；
左：51px；
顶部：-61px；
}

---

根据您的HTML，我得到。我刚刚玩了

transform

.mainDiv{
位置：相对位置；
宽度：206px；
高度：190px；
保证金：0px自动；
边缘顶部：100px；
}
.广场{
宽度：100px；
高度：100px；
背景：#c52329；
边框：实心2px#FFF；
变换：倾斜（180度、210度）；
位置：绝对位置；
顶部：43px；
}
.2平方米{
宽度：100px；
高度：100px；
背景：#c52329；
边框：实心2px#FFF；
变换：倾斜（180度、150度）；
位置：绝对位置；
左：102px；
顶部：43px；
}
.3{
宽度：114px；
高度：100px；
背景：#c52329；
边框：实心2px#FFF；
变换：旋转（150度）平移（-40px，-16px）倾斜（30度，0度）；
位置：绝对位置；
左：0px；
顶部：-32px；
}

---

更改

.square3

的CSS应该可以：

高度：58px；
左：50px；
位置：绝对位置；
顶部：-18px；
变换：倾斜（240度、150度）；
宽度：100px；

---

基本上，您需要进行两种转换：

旋转矩形

挤压（倾斜）

所以基本上，你需要做一个

变换：旋转（x）倾斜（y，y）

，并在大小和放置方面做一些调整

下面是我根据您自己的演示创建的一个小演示： （我确实移除了边界，因为它们对我来说是多余的）

.mainDiv{
位置：相对位置；
宽度：206px；
高度：190px；
保证金：0px自动；
边缘顶部：100px；
}
.广场{
宽度：100px；
高度：100px；
背景：#c52329；
浮动：左；
变换：倾斜（180度、210度）；
位置：绝对位置；
顶部：43px；
}
.2平方米{
宽度：100px；
高度：100px；
背景：#c52329；
浮动：左；
变换：倾斜（180度、150度）；
位置：绝对位置；
左：102px；
顶部：43px；
}
.3{
宽度：110px；
高度：110px；
背景：#c52329；
浮动：左；
变换：旋转（45度）倾斜（-15度，-15度）；
位置：绝对位置；
左：46px；
顶部：-42px；
}

---

首先让我指出，

倾斜角度应在
-90deg
和
90deg
之间，不包括在内。你所有的歪斜都在这个范围之外

将自己局限于合理的扭曲数字，结果很简单：


.mainDiv{
位置：相对位置；
宽度：206px；
高度：190px；
保证金：0px自动；
边缘顶部：100px；
}
.瓷砖{
宽度：100px；
高度：100px；
背景：#c52329；
边框：实心2px#FFF；
位置：绝对位置；
}
.广场{
变换：歪斜（30度）；
顶部：43px；
}
.2平方米{
变换：歪斜（-30度）；
左：102px；
顶部：43px；
}
.3{
高度：58px；
左：50px；
顶部：-18px；
变换：倾斜（60度，-30度）；
}

对
.square3
使用以下css：

.square3{
宽度：110px；
高度：110px；
背景：#c52329；
浮动：左；
变换：旋转（45度）倾斜（-15度，-15度）；
位置：绝对位置；
左：46px；
顶部：-42px；
}
一个框和两个伪框也可以做到这一点



#正方形{
显示器：flex；
对齐项目：居中；
证明内容：中心；
边界半径：5px；
背景：#C52329；
/*盒影：0 0 5px*/
宽度：90px；
高度：150像素；
边缘：5em；
位置：相对位置；
变换：倾斜（30度）旋转（30度）；
}
#广场：以前，
#广场：之后{
显示：继承；
对齐项目：居中；
证明内容：中心；
内容:"以前";；
位置：绝对位置；
排名：0；
左：2px；
右：-2px；
底部：0；
背景：继承；
边界半径：继承；
盒影：继承；
变换：平移（100%，-31%）倾斜（0，-45度）旋转（0度）；
}
#广场：之后{
内容：“之后”；
顶部：-2px；
左：0%；
身高：60%；
右：0；
底部：2px；
变换：平移（50%，-100%）旋转（0度）倾斜（-45度）
}

拳击
您还可以使用3d变换实现立方体。这将给你的立方体一个更真实的视角。就像立方体是一个真实的3d形状，如下所示：


在下面的示例中，我使用了一个div和两个伪元素：


正文{
透视图：900px；
垫底：50%；
}
div{
位置：相对位置；
宽度：20%；
垫底：20%；
保证金：0自动；
变换样式：保留-3d；
背景：#C52329；
变换：rotateX（60度）rotatez（45度）；
}
div:before，div:after{
内容：''；
位置：绝对位置；
宽度：100%；
身高：100%；
转换原点：-2%-2%；
背景：继承；
}
部门：以前{
顶部：104%；左侧：0；
变换：rotateX（-90度）；
}
部门：之后{
顶部：0；左侧：104%；
变换：旋转（90度）；
}
我看到了这一点，并想添加一些我在尝试制作一些老式abc块时想到的东西。将它们转换成3d，我只需用另一个类标记主容器即可更改位置并保存在代码中。我在代码中对教程进行了注释。希望这对某人有帮助。：）



/*-------------------------------------------------------------   
首先，我们需要创建容器以供以后参考
-如果你愿意，我会把它放在屏幕中央
将代码复制并粘贴到
      y         
      |          
      |____ x 
     ╱        
    z