html{ perspective: 800px; } body{ display:flex; flex-wrap: wrap; } .card{ transform-style: preserve-3d; position:relative; height:500px; width:300px; border: 6px inset rgba(240, 237, 237, 0.5); margin-right:30px; margin-bottom:40px; box-shadow:3px 3px 5px 1px gray; border-radius: 6px; background-image:linear-gradient(150deg,rgb(145, 144, 144),rgb(235, 231, 231), rgb(255, 255, 255), rgb(161, 159, 159)); padding-top: 0px;transition:transform 1s ease-in; } .card:hover{ transform:rotateY(180deg); } .front{ height:100%; width:100%; position: absolute; left:0; top:0; } .back{ display:flex; align-items: center; height:100%; width:100%; line-height:100%; position:absolute; left:0; top:0; background-image:linear-gradient(150deg,rgb(145, 144, 144),rgb(235, 231, 231), rgb(255, 255, 255), rgb(161, 159, 159)); transform:rotateY(180deg); } .textback{ font-family: '幼圆'; font-size:1.5rem; line-height:2rem; position:absolute; text-align: center; width:100%; } img{ height:300px; width:100%; } .text{ color:rgb(109, 106, 106); font-family: '幼圆'; font-size:1.5rem; position:absolute; width:100%; top:77%; text-align: center; }