CSS学习案例（11）：3D堆叠图片ui布局特效

	<div class="container">
        <div class="food-card">
            <div class="pic">
                <img src="https://www.17sucai.com/preview/1424582/2020-07-03/dz/img/1.jpg" alt="Pizza">
            </div>
            <div class="detail">
                <div class="col left">
                    <div class="name">Pizza</div>
                    <div class="texture">Fresh & sweet</div>
                </div>
                <div class="col right">
                    <div class="cost">$50</div>
                    <div class="star">
                        <span class="light"></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="food-card">
            <div class="pic">
                <img src="https://www.17sucai.com/preview/1424582/2020-07-03/dz/img/2.jpg" alt="Chicken">
            </div>
            <div class="detail">
                <div class="col left">
                    <div class="name">Chicken</div>
                    <div class="texture">Fried to crisp</div>
                </div>
                <div class="col right">
                    <div class="cost">$82</div>
                    <div class="star">
                        <span class="light"></span>
                        <span class="light"></span>
                        <span class="light"></span>
                        <span class="light"></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="food-card">
            <div class="pic">
                <img src="https://www.17sucai.com/preview/1424582/2020-07-03/dz/img/3.jpg" alt="Coffee">
            </div>
            <div class="detail">
                <div class="col left">
                    <div class="name">Coffee</div>
                    <div class="texture">Anyhow</div>
                </div>
                <div class="col right">
                    <div class="cost">$5</div>
                    <div class="star">
                        <span class="light"></span>
                        <span class="light"></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

:root{
    --background-color:#e8e6e7;
}

*{
    margin: 0;padding: 0;
}

html{
    font-size: 14px;
}

body{
    width: 100vw;height: 100vh;
    background-color: var(--background-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Montserrat', sans-serif;
    perspective: 1000px;
}

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.food-card{
    position: absolute;
    width: 325px;
    border-radius: 30px;
    box-shadow: -30px 70px 150px -20px rgba(51, 51, 51, 0.25);
    background-color: #fff;
    overflow: hidden;
    transform-style: preserve-3d;
    transition: 0.5S;
}

.food-card:nth-of-type(1){
    transform: translate(-30%,15%) rotateX(22deg) rotateZ(-14deg) rotateY(17deg);
}
.food-card:nth-of-type(2){
    transform: translate(0%,-15%) rotateX(22deg) rotateZ(-14deg) rotateY(17deg);
}
.food-card:nth-of-type(3){
    transform: translate(30%,15%) rotateX(22deg) rotateZ(-14deg) rotateY(17deg);
}

.food-card:hover:nth-of-type(1){
    transform: translate(-30%,15%) rotateX(22deg) rotateZ(-14deg) rotateY(17deg) translateZ(30px);
    z-index: 1;
}
.food-card:hover:nth-of-type(2){
    transform: translate(0%,-15%) rotateX(22deg) rotateZ(-14deg) rotateY(17deg) translateZ(30px);
    z-index: 1;
}
.food-card:hover:nth-of-type(3){
    transform: translate(30%,15%) rotateX(22deg) rotateZ(-14deg) rotateY(17deg) translateZ(30px);
    z-index: 1;
}


.pic{
    height: 160px;
}
.pic img{
    width: 100%;
    transform: rotate(8deg) translate(-10px,-55px);
    border-radius: 30px;
}

.detail{
    padding: 8px 30px 20px;
    display: flex;
    justify-content: space-between;
}

.col .name{
    font-size: 18px;
    font-weight: bold;
    color: #11313c;
}
.col .texture{
    font-size: 14px;
    font-weight: 500;
    color: #949a98;
}
.col .cost{
    font-size: 18px;
    font-weight: bold;
    color: #f7736e;
    text-align: right;
}

.col .star{
    display: flex;
    justify-content: center;
    align-items: center;
}

.col .star span{
    display: block;
    width: 20px;height: 20px;
    background-color: #dadada;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.col .star span.light{
    background-color: #e6c356;
}

原案例参考：3D堆叠图片ui布局特效