css实现立体阴影盒子——transform

效果图如下：

 

首先设置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%);
        }

最后就完成啦