SOURCE

<div class="main">
    <div id="card-1" class="card" text="我的世界-大树"></div>
    <div id="card-2" class="card" text="Minecraft-地形"></div>
    <div id="card-3" class="card" text="我的世界-空岛"></div>
    <div id="card-4" class="card" text="Minecraft-爆炸"></div>
    <div id="card-5" class="card" text="我的世界-给他爱"></div>
    <div id="card-6" class="card" text="Minecraft-城镇"></div>
    <div id="card-7" class="card" text="我的世界-古堡"></div>
</div>

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

body {
    width: 100%;
    height: 100%;
    overflow: auto;
    perspective: 10px;
    transform-style: preserve-3d;
}

.main {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: black;
    overflow: hidden;
}

.card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 20px);
    min-height: 30vw;
    margin: 10px 10px 0;
    border-radius: 10px;
    overflow: hidden;
}

.card:last-child {
    margin-bottom: 10px;
}

.card::before {
    content: "";
    position: absolute;
    top: -10%;
    width: 100%;
    height: 300%;
    background-size: 100%;
    transform: scale(1.21) translateZ(-2px);
}

.card::after {
    content: attr(text);
    padding: 20px;
    font-size: 4vw;
    color: white;
    text-shadow: 0 0 5px black;
    transform: translateZ(0);
}

#card-1::before {
    background-image: url(http://www.uc129.com/uploads/allimg/150108/1-15010R35101U0.jpg);
}

#card-2::before {
    background-image: url(http://pic1.win4000.com/wallpaper/7/5992b64157821.jpg);
}

#card-3::before {
    background-image: url(http://img.yxzoo.com/allimg/160831/16083111551014.jpg);
}

#card-4::before {
    background-image: url(http://img.yxzoo.com/allimg/160723/1-160H3142P8.jpg);
}

#card-5::before {
    background-image: url(http://i2.hdslb.com/bfs/archive/39f110b22f47478538eda5eda4c3a587ffc19990.png);
}

#card-6::before {
    background-image: url(http://img.kuai8.com/game/202003/31/24545cfed4.png);
}

#card-7::before {
    background-image: url(http://img.yxzoo.com/allimg/151201/1512011110262.jpg);
}