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的块显示并向其添加左边距，以便将其推向侧面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); /* ??! */
}

希望这能解决你的问题。

CSS制作具有倾斜的立方体并旋转

1 个答案: