查看“模板:首页列表图”的源代码

<div class="contianerBig">
	<div class="contianer">
		<div style="overflow: hidden;border-radius: 20px;">[[File:黎深.png|link=黎深]]</div>
		<div style="overflow: hidden;border-radius: 20px;" class="big-bgd">[[File:黎深.png|link=黎深]]</div>
	</div>
    
</div>
<div class="contianerBig">
	<div class="contianer">
		<div style="overflow: hidden;border-radius: 20px;">[[File:祁煜.png|link=祁煜]]</div>
		<div style="overflow: hidden;border-radius: 20px;"  class="big-bgd">[[File:祁煜.png|link=祁煜]]</div>
	</div>
    
</div>
<div class="contianerBig">
	<div class="contianer">
		<div style="overflow: hidden;border-radius: 20px;">[[File:沈星回.png|link=沈星回]]</div>
		<div style="overflow: hidden;border-radius: 20px;"  class="big-bgd">[[File:沈星回.png|link=沈星回]]</div>
	</div>
</div>
{{#css:
.contianerBig {
height: 110px;
border-radius: 20px;
width: 100%;
}

.contianer {
width: 100%;
height: 100%;
position: relative;
perspective: 1000px
}

.contianer>div {
position: absolute;
backface-visibility: hidden;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
transition: all 1s
}

.contianer>div:nth-child(2) {
transform: rotateX(180deg)
}

.contianerBig:hover .contianer>div:first-child {
transform: rotateX(-180deg)
}

.contianerBig:hover .contianer>div:last-child {
transform: rotateX(0deg)
}
@media only screen and (max-width:759px){
.contianerBig {
 height: 80px;
}
}
}}