我一直在玩我在这里找到的演示: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);
}
注意:我已经向#pyramid
应用了45度旋转以倾斜金字塔,以便我可以看到它下方。
答案 0 :(得分:1)
首先,您需要创建:before
(或:after
)元素,使其上边缘附加到某个面的下边缘(例如#front
)。底面的大小应为50x50
。如此附加后,您需要围绕X轴(以及顶部边缘)旋转底面(使用rotateX
)。由于#front
面部已旋转30deg
,您需要旋转底面-120deg
(-30deg
使其垂直,然后-90deg
使其适合进入金字塔底部的平面)。
另请注意,容器的transform-style
应设置为preserve-3d
,因此transform-style
的{{1}}也应设置为该值。现在是CSS代码细节:
#front