css - 将基础应用于此 CSS 金字塔

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 #front 也应设置为该值。下面是CSS代码详情:

#front{
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;

    -webkit-transform:rotateX(30deg);
    -moz-transform:rotateX(30deg); 
    border-bottom:50px solid rgba(147,81,166,0.9);               
}
#front:before {
    content:'';
    position:absolute;
    width:50px;
    height:50px;
    top:50px;
    left:-25px;               
    -webkit-transform-origin: 50% 0% 0;
    -moz-transform-origin: 50% 0% 0;
    -webkit-transform:rotate3d(1,0,0,-120deg);
    -moz-transform:rotate3d(1,0,0,-120deg);
    background: rgba(180,80,180,0.9);
    border:1px solid rgb(147,81,166,.5);
}

Demo.