效果图如下:
首先设置body主要结构体,这里是三个div盒子,分别对应三个立体面
<div class="stage">
<div class="container">
<div id="left"><p>LEFT</p></div>
<div id="top"><p>TOP</p></div>
<div id="right"><p>RIGHT</p></div>
</div>
</div>
对立体面文字的样式设置:
P{
color: rgb(252, 247, 247);
font-weight: bold;
text-align: center;
padding-top: 40px;
}
然后对左侧的样式设计:transform里面是两个属性(倾斜和位移)的合并
#left{
background-color: rgb(199, 199, 206);
width: 100px;
height: 100px;
transform: skew(0,20deg) translate(50%, 100%) ;
}
右侧的样式基本差不多,但是背景用渐变(从上到下)来突出阴影的效果:
#right{
background:linear-gradient(to bottom,rgb(199, 199, 206),rgb(140, 143, 140));
width: 100px;
height: 100px;
transform: skew(0,-20deg) translate(150%,-59%);
}
上面的样式:rotate取负是逆时针旋转45°,缩放0.97,倾斜x轴是25°,y轴是25°,最后移动对象到指定位置。
#top{
background-color: rgb(187, 184, 184);
width: 100px;
height: 100px;
transform: rotate(-45deg) scale(0.97) skew(25deg,25deg) translate(140%,-40%);
}
最后就完成啦