html - CSS使立方体具有倾斜和旋转

Question

我正在尝试用 3 个正方形 div 和 CSS 制作立方体。问题出现在顶部:我无法找到合适的形状。

当然，使用矩阵或其他东西应该是一种简单的方法，但是如果有办法只使用 skew 和 rotate 来解决这个问题，请提供。

提前致谢。

html:

<div id='box' class='top'></div>
<div id='box' class='left'></div>
<div id='box' class='right'></div>

CSS:

#box {
    width: 50px;
    height: 50px;
}
.top {
    background: #bbf;
    margin: 40px 0 0 24px;
    transform: rotate(-30deg) skewX(30deg); /* ??! */
}
.left {
    background: #fbb;
    transform: rotate(30deg) skewX(30deg);
    display: inline-block;
    margin: -11px 0 0 0;
}
.right {
    background: #bfb;
    transform: rotate(60deg) skewY(30deg);
    display: inline-block;
    margin: -11px 0 0 -11px;
}

编辑:感谢@rby，我对图层进行了一些重新排序

See at jsfiddle

Answer 1

这是一种仅使用您指定的倾斜和旋转来完成此操作的方法，但需要进行一些额外的修改。首先，也是最重要的，安排您的 div 的顺序，使顶部框的 div 在第一位，然后是两侧。按照您现在的方式，顶级 div(第三类)在最后。然后，我做的其他修改是为顶部 div 使用 block 显示并为其添加左边距，以便将其推向侧面 div，并将侧面 div 的顶部边距从 50px 减少到 10px。通过这些更改和您现有的旋转、skewX 转换，您将获得一个立方体。

这是修改后的代码 - 为了不破坏您的代码太多，我只是为顶部框创建了一个名为 boxTop 的新 ID，但最好重组规则。

div:

<div id='boxTop' class='third'></div>
<div id='box' class='first'></div>
<div id='box' class='second'></div>

CSS:

#box {
    width: 100px;
    height: 100px;
    margin-top: 10px;
    display: inline-block;
}
#boxTop {
    width: 100px;
    height: 100px;
    display: block;
}

.third {
    background: #bbf;
    margin-left: 50px;
    transform: rotate(-30deg) skewX(30deg); /* ??! */
}

希望这能解决您的问题。