将base应用于此CSS金字塔

时间:2014-05-07 11:40:18

标签: css css3 css-transforms

我一直在玩我在这里找到的演示: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度旋转以倾斜金字塔,以便我可以看到它下方。

1 个答案:

答案 0 :(得分:1)

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

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

#front

Demo.