CSS翻牌效果

html代码

<div class="card-container">
  <div class="cover">
    COVER
  </div>
  <div class="back">
    BACK
  </div>
</div>

<div class="card-container">
  <div class="cover">
    COVER
  </div>
  <div class="back">
    BACK
  </div>
</div>

<div class="card-container">
  <div class="cover">
    COVER
  </div>
  <div class="back">
    BACK
  </div>
</div>

css代码

html {
  font-size: 22px;
}

body {
  height: 100vh;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  font-family: Helvetica, Arial;
  background-image: radial-gradient( circle 506px at 50.6% 16.5%,  rgba(239,252,250,1) 5.5%, rgba(154,192,206,1) 100.2% );
}

.card-container {
  width: 300px;
  height: 400px;
  position: relative;
  perspective: 1000px;
}

.cover, .back {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform .25s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  border-radius: .4rem;
  box-shadow: 0 .2rem .5rem rgba(0, 0, 0, .18);
  text-shadow: 0 .15rem .2rem rgba(0, 0, 0, .2);
}
.cover {
  background-color: blue;
  transform: rotatey(0deg);
  background-image: radial-gradient( circle 484px at 49.4% 19%,  rgba(23,156,214,1) 0%, rgba(52,48,111,1) 100.2% );
  color: #fff;
}
.card-container:hover .cover {
  transform: rotatey(180deg);
}
.back {
  background-color: yellow;
  transform: rotatey(-180deg);
  background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(255,171,0,1) 0%, rgba(255,139,0,1) 90.1% );
}
.card-container:hover .back {
  transform: rotatey(0deg);
}