CSS翻牌效果

迈不过友情╰ 2023-02-20 07:43 25阅读 0赞

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);
    }