Question

我一直在玩我在这里找到的演示：http://codepen.io/singhiskng/pen/dqiGj

我正在尝试制作一个4面金字塔。

      <div id="pyramid-container">
        <div id="pyramid">
            <div class="face" id="front" ></div>
            <div class="face" id="back" ></div>
            <div class="face" id="left" ></div>
            <div class="face" id="right" ></div>
        </div>
     </div>

我有4个方面排好了，但我想在它们下面有一个底座。我尝试使用伪元素，将其平方，并将其旋转90度。然而，它并没有出现，我不确定为什么：

#front::after{
    width:50px;
    height:50px;
    border-width:0;
    background-color:rgba(147,81,166,0.9);
    -webkit-transform:rotateX(90deg);
    -moz-transform:rotateX(90deg);
}

http://jsfiddle.net/r5Xjq/1/

注意：我已经向#pyramid应用了45度旋转以倾斜金字塔，以便我可以看到它下方。

Answer 1

首先，您需要创建:before（或:after）元素，使其上边缘附加到某个面的下边缘（例如#front）。底面的大小应为50x50。如此附加后，您需要围绕X轴（以及顶部边缘）旋转底面（使用rotateX）。由于#front面部已旋转30deg，您需要旋转底面-120deg（-30deg使其垂直，然后-90deg使其适合进入金字塔底部的平面）。

另请注意，容器的transform-style应设置为preserve-3d，因此transform-style的{{1}}也应设置为该值。现在是CSS代码细节：

#front

将base应用于此CSS金字塔

1 个答案:

Demo.