CSS-Implementierungscode für verzerrte Schatten

<ul Klasse="Box">
    <li><img src="......" alt=""></li>
    <li><img src="......" alt=""></li>
    <li><img src="......" alt=""></li>
</ul>

ul,li {
    Listenstil: keiner;
}
.Kasten {
    Breite: 980px;
    Höhe: automatisch;
    klar: beides;
    Überlauf: versteckt;
    Rand: 20px automatisch;
}
.box li {
    Breite: 300px;
    Höhe: 210px;
    Position: relativ;
    Hintergrund: #fff;
    schweben: links;
    Rand: 20px 10px;
    Rand: 2px durchgezogen #efefef;
    Box-Schatten: 0 1px 4px rgba(0, 0, 0, .27), 0 0 60px rgba(0, 0, 0, 0,1) Einschub;
}
.box li img {
    Anzeige: Block;
    Breite: 290px;
    Höhe: 200px;
    Rand: 5px;
}
.box li:vorher, .box li:nachher {
    Inhalt: '';
    Position: absolut;
    z-Index: -2;
    Breite: 80%;
    Höhe: 80%;
    unten: 8px;
    Hintergrund: transparent;
    Kastenschatten: 0 8px 26px rgba (0, 0, 0, 0,6);
}
.box li:vor {
    links: 7%;
    transformieren: schiefX(-12 Grad) drehen(-4 Grad);
}
.box li:nach {
    rechts: 7%;
    transformieren: schrägX(12 Grad) drehen(4 Grad);
}