仅使用css和html进行前后卡动画

Question

我想在我的网页上添加一些动画效果，必须添加以下指定格式的卡片，前后效果。当我点击任何一张牌时，它必须在前面，所有其他牌都在前面的牌后面。

最初我的卡片是这样的。 点击操作后，我的卡就像这样。

这是我的Html代码

<div class="cardlist" align="center">
<div class="card" style="float:left;">
    <div class="flip-container">
        <div class="flipper">
            <div class="front">
                <!-- front content -->
                <img src="Assert/Settings-icon.png" alt="Avatar" style="width:100%">
                <div class="container">
                    <h4><b>Alert Setting</b></h4>
                    <p>Setting descriptions</p>
                </div>
            </div>
            <div class="back">
            <!-- back content -->
                <img src="Assert/Settings-icon-2.png" alt="Avatar" style="width:100%">
                <div class="container">
                    <h4><b>Alert Setting</b></h4>
                    <p>Setting descriptions</p>
                    <input type="checkbox" name="Notification" value="Email">Email
                </div>
            </div>
        </div>
    </div>
</div>
<div class="card" style="float:left;">
    <div class="flip-container">
        <div class="flipper">
            <div class="front">
                <!-- front content -->
                <img src="Assert/Settings-icon.png" alt="Avatar" style="width:100%">
                <div class="container">
                    <h4><b>Alert Setting</b></h4>
                    <p>Setting descriptions</p>
                </div>
            </div>
            <div class="back">
            <!-- back content -->
                <img src="Assert/Settings-icon-2.png" alt="Avatar" style="width:100%">
                <div class="container">
                    <h4><b>Alert Setting</b></h4>
                    <p>Setting descriptions</p>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="card" style="float:left;">
    <div class="flip-container">
        <div class="flipper">
            <div class="front">
                <!-- front content -->
                <img src="Assert/Settings-icon.png" alt="Avatar" style="width:100%">
                <div class="container">
                    <h4><b>Alert Setting</b></h4>
                    <p>Setting descriptions</p>
                </div>
            </div>
            <div class="back">
            <!-- back content -->
                <img src="Assert/Settings-icon-2.png" alt="Avatar" style="width:100%">
                <div class="container">
                    <h4><b>Alert Setting</b></h4>
                    <p>Setting descriptions</p>
                </div>
            </div>
        </div>
    </div>      
</div>

和我的CSS代码

 .card {
padding: 30px;
background: #fff;
/*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);*/
transition: 0.3s;
width: 10%;
}

.card:hover .cardlarge , .card.hover .cardlarge {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
width: 20%;
}

.container {
padding: 2px 16px;
}

.cardlarge {
padding: 30px;
background: #fff;
transition: 0.3s;
width: 20%;
}
.flip-container {
perspective: 1000px;
}
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}

.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}

.front, .back {
backface-visibility: hidden;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
position: absolute;
top: 0;
left: 0;
}

.front {
z-index: 2;
transform: rotateY(0deg);
}


.back {
transform: rotateY(180deg);
}